8-bit Pagination

1import { type VariantProps, cva } from "class-variance-authority";
2import { MoreHorizontal } from "lucide-react";
3 
4import { cn } from "@/lib/utils";
5 
6import {
7  Pagination as ShadcnPagination,
8  PaginationContent as ShadcnPaginationContent,
9  PaginationEllipsis as ShadcnPaginationEllipsis,
10  PaginationItem as ShadcnPaginationItem,
11  PaginationLink as ShadcnPaginationLink,
12} from "@/components/ui/pagination";
13 
14import type { Button } from "../button";
15import "@/components/ui/8bit/styles/retro.css";
16 
17export const paginationVariants = cva("", {
18  variants: {
19    font: {
20      normal: "",
21      retro: "retro",
22    },
23    variant: {
24      default: "text-card-foreground",
25      destructive:
26        "text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
27    },
28  },
29  defaultVariants: {
30    variant: "default",
31  },
32});
33 
34export type BitPaginationProps<T extends React.ElementType> =
35  React.ComponentPropsWithoutRef<T> & VariantProps<typeof paginationVariants>;
36 
37function Pagination({ ...props }: BitPaginationProps<"nav">) {
38  const { variant, className, font } = props;
39  return (
40    <ShadcnPagination
41      {...props}
42      className={cn(
43        paginationVariants({ variant }),
44        font !== "normal" && "retro",
45        className
46      )}
47    />
48  );
49}
50 
51const ChevronLeftIcon = () => {
52  return (
53    <svg
54      width="50"
55      height="50"
56      viewBox="0 0 256 256"
57      fill="currentColor"
58      xmlns="http://www.w3.org/2000/svg"
59      stroke="currentColor"
60      strokeWidth="0.25"
61      color=""
62      className="size-7"
63      aria-label="chevron-left"
64    >
65      <rect
66        width="14"
67        height="14"
68        rx="1"
69        transform="matrix(-1 0 0 1 128 136)"
70      ></rect>
71      <rect
72        width="14"
73        height="14"
74        rx="1"
75        transform="matrix(-1 0 0 1 144 152)"
76      ></rect>
77      <rect
78        width="14"
79        height="14"
80        rx="1"
81        transform="matrix(-1 0 0 1 160 72)"
82      ></rect>
83      <rect
84        width="14"
85        height="14"
86        rx="1"
87        transform="matrix(-1 0 0 1 160 168)"
88      ></rect>
89      <rect
90        width="14"
91        height="14"
92        rx="1"
93        transform="matrix(-1 0 0 1 112 120)"
94      ></rect>
95      <rect
96        width="14"
97        height="14"
98        rx="1"
99        transform="matrix(-1 0 0 1 128 104)"
100      ></rect>
101      <rect
102        width="14"
103        height="14"
104        rx="1"
105        transform="matrix(-1 0 0 1 144 88)"
106      ></rect>
107// … truncated