8-bit Table

1"use client";
2 
3import type * as React from "react";
4 
5import { type VariantProps, cva } from "class-variance-authority";
6 
7import { cn } from "@/lib/utils";
8 
9import {
10  Table as ShadcnTable,
11  TableBody as ShadcnTableBody,
12  TableCaption as ShadcnTableCaption,
13  TableCell as ShadcnTableCell,
14  TableFooter as ShadcnTableFooter,
15  TableHead as ShadcnTableHead,
16  TableHeader as ShadcnTableHeader,
17  TableRow as ShadcnTableRow,
18} from "@/components/ui/table";
19 
20import "@/components/ui/8bit/styles/retro.css";
21 
22export const tableVariants = cva("", {
23  variants: {
24    variant: {
25      default: "p-4 py-2.5 border-y-6 border-foreground dark:border-ring",
26      borderless: "",
27    },
28    font: {
29      normal: "",
30      retro: "retro",
31    },
32  },
33  defaultVariants: {
34    font: "retro",
35    variant: "default",
36  },
37});
38 
39function Table({
40  className,
41  font,
42  variant,
43  ...props
44}: React.ComponentProps<"table"> & {
45  font?: VariantProps<typeof tableVariants>["font"];
46  variant?: VariantProps<typeof tableVariants>["variant"];
47}) {
48  return (
49    <div
50      className={cn(
51        "relative flex justify-center w-fit",
52        tableVariants({ font, variant })
53      )}
54    >
55      <ShadcnTable className={className} {...props} />
56 
57      {variant !== "borderless" && (
58        <div
59          className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
60          aria-hidden="true"
61        />
62      )}
63    </div>
64  );
65}
66 
67function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
68  return (
69    <ShadcnTableHeader
70      className={cn(className, "border-b-4 border-foreground dark:border-ring")}
71      {...props}
72    />
73  );
74}
75 
76function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
77  return <ShadcnTableBody className={cn(className)} {...props} />;
78}
79 
80function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
81  return <ShadcnTableFooter className={cn(className)} {...props} />;
82}
83 
84function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
85  return (
86    <ShadcnTableRow
87      className={cn(
88        className,
89        "border-dashed border-b-4 border-foreground dark:border-ring"
90      )}
91      {...props}
92    />
93  );
94}
95 
96function TableHead({ className, ...props }: React.ComponentProps<"th">) {
97  return <ShadcnTableHead className={cn(className)} {...props} />;
98}
99 
100function TableCell({ className, ...props }: React.ComponentProps<"td">) {
101// … truncated