8-bit Drawer

1import { type VariantProps, cva } from "class-variance-authority";
2import { Drawer as DrawerPrimitive } from "vaul";
3 
4import { cn } from "@/lib/utils";
5 
6import {
7  Drawer as ShadcnDrawer,
8  DrawerClose as ShadcnDrawerClose,
9  DrawerDescription as ShadcnDrawerDescription,
10  DrawerFooter as ShadcnDrawerFooter,
11  DrawerHeader as ShadcnDrawerHeader,
12  DrawerOverlay as ShadcnDrawerOverlay,
13  DrawerPortal as ShadcnDrawerPortal,
14  DrawerTitle as ShadcnDrawerTitle,
15  DrawerTrigger as ShadcnDrawerTrigger,
16} from "@/components/ui/drawer";
17 
18import "@/components/ui/8bit/styles/retro.css";
19 
20const Drawer = ShadcnDrawer;
21 
22const DrawerPortal = ShadcnDrawerPortal;
23 
24const DrawerOverlay = ShadcnDrawerOverlay;
25 
26const DrawerClose = ShadcnDrawerClose;
27 
28function DrawerTitle({
29  className,
30  children,
31  ...props
32}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
33  return (
34    <ShadcnDrawerTitle className={cn(className, "retro")} {...props}>
35      {children}
36    </ShadcnDrawerTitle>
37  );
38}
39 
40function DrawerDescription({
41  className,
42  children,
43  ...props
44}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
45  return (
46    <ShadcnDrawerDescription className={cn(className, "retro")} {...props}>
47      {children}
48    </ShadcnDrawerDescription>
49  );
50}
51 
52function DrawerTrigger({
53  className,
54  children,
55  asChild,
56  ...props
57}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
58  return (
59    <ShadcnDrawerTrigger
60      className={cn(
61        // Only apply default trigger styling when NOT using asChild
62        !asChild &&
63          "border-foreground dark:border-ring hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-4 focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring",
64        className,
65        "retro"
66      )}
67      asChild={asChild}
68      {...props}
69    >
70      {children}
71    </ShadcnDrawerTrigger>
72  );
73}
74 
75export const drawerVariants = cva("", {
76  variants: {
77    font: {
78      normal: "",
79      retro: "retro",
80    },
81  },
82  defaultVariants: {
83    font: "retro",
84  },
85});
86 
87export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Content> &
88  VariantProps<typeof drawerVariants> & {
89    side?: "right" | "bottom" | "left";
90  };
91 
92function DrawerContent({
93  className,
94  children,
95  side = "bottom",
96  ...props
97}: DrawerProps) {
98  return (
99    <ShadcnDrawerPortal data-slot="drawer-portal">
100// … truncated