8-bit Card

1import { type VariantProps, cva } from "class-variance-authority";
2 
3import { cn } from "@/lib/utils";
4 
5import {
6  Card as ShadcnCard,
7  CardAction as ShadcnCardAction,
8  CardContent as ShadcnCardContent,
9  CardDescription as ShadcnCardDescription,
10  CardFooter as ShadcnCardFooter,
11  CardHeader as ShadcnCardHeader,
12  CardTitle as ShadcnCardTitle,
13} from "@/components/ui/card";
14 
15import "@/components/ui/8bit/styles/retro.css";
16 
17export const cardVariants = cva("", {
18  variants: {
19    font: {
20      normal: "",
21      retro: "retro",
22    },
23  },
24  defaultVariants: {
25    font: "retro",
26  },
27});
28 
29export interface BitCardProps
30  extends React.ComponentProps<"div">,
31    VariantProps<typeof cardVariants> {
32  asChild?: boolean;
33}
34 
35function Card({ className, font, ...props }: BitCardProps) {
36  return (
37    <div
38      className={cn(
39        "relative bg-card text-card-foreground border-y-6 border-foreground dark:border-ring p-0!",
40        className
41      )}
42    >
43      <ShadcnCard
44        {...props}
45        className={cn(
46          "rounded-none border-0 w-full! h-full flex flex-col bg-card text-card-foreground shadow-none",
47          font !== "normal" && "retro",
48          className
49        )}
50      />
51 
52      <div
53        className={cn("absolute inset-0 border-x-6 -mx-1.5 border-inherit pointer-events-none")}
54        aria-hidden="true"
55      />
56    </div>
57  );
58}
59 
60function CardHeader({ ...props }: BitCardProps) {
61  const { className, font } = props;
62 
63  return (
64    <ShadcnCardHeader
65      className={cn(font !== "normal" && "retro", className)}
66      {...props}
67    />
68  );
69}
70 
71function CardTitle({ ...props }: BitCardProps) {
72  const { className, font } = props;
73 
74  return (
75    <ShadcnCardTitle
76      className={cn(font !== "normal" && "retro", className)}
77      {...props}
78    />
79  );
80}
81 
82function CardDescription({ ...props }: BitCardProps) {
83  const { className, font } = props;
84 
85  return (
86    <ShadcnCardDescription
87      className={cn(font !== "normal" && "retro", className)}
88      {...props}
89    />
90  );
91}
92 
93function CardAction({ ...props }: BitCardProps) {
94  const { className, font } = props;
95 
96  return (
97    <ShadcnCardAction
98      className={cn(font !== "normal" && "retro", className)}
99      {...props}
100    />
101  );
102}
103 
104function CardContent({ ...props }: BitCardProps) {
105  const { className, font } = props;
106 
107  return (
108    <ShadcnCardContent
109      className={cn("flex-1", font !== "normal" && "retro", className)}
110      {...props}
111    />
112  );
113}
114 
115// … truncated