8-bit sheet

1import * as SheetPrimitive from "@radix-ui/react-dialog";
2import { type VariantProps, cva } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6import {
7  Sheet as ShadcnSheet,
8  SheetClose as ShadcnSheetClose,
9  SheetDescription as ShadcnSheetDescription,
10  SheetFooter as ShadcnSheetFooter,
11  SheetHeader as ShadcnSheetHeader,
12  SheetTitle as ShadcnSheetTitle,
13  SheetTrigger as ShadcnSheetTrigger,
14} from "@/components/ui/sheet";
15 
16import "@/components/ui/8bit/styles/retro.css";
17 
18const Sheet = ShadcnSheet;
19 
20const SheetTrigger = ShadcnSheetTrigger;
21 
22const SheetClose = ShadcnSheetClose;
23 
24const SheetDescription = ShadcnSheetDescription;
25 
26const SheetFooter = ShadcnSheetFooter;
27 
28const SheetHeader = ShadcnSheetHeader;
29 
30const SheetTitle = ShadcnSheetTitle;
31 
32export const sheetVariants = cva("", {
33  variants: {
34    font: {
35      normal: "",
36      retro: "retro",
37    },
38  },
39  defaultVariants: {
40    font: "retro",
41  },
42});
43 
44function SheetPortal({
45  ...props
46}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
47  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
48}
49 
50function SheetOverlay({
51  className,
52  ...props
53}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
54  return (
55    <SheetPrimitive.Overlay
56      data-slot="sheet-overlay"
57      className={cn(
58        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
59        className
60      )}
61      {...props}
62    />
63  );
64}
65 
66export type BitSheetProps = React.ComponentProps<
67  typeof SheetPrimitive.Content
68> &
69  VariantProps<typeof sheetVariants> & {
70    side?: "top" | "right" | "bottom" | "left";
71  };
72 
73function SheetContent({
74  className,
75  children,
76  side = "right",
77  font,
78  ...props
79}: BitSheetProps) {
80  return (
81    <SheetPortal>
82      <SheetOverlay />
83      <SheetPrimitive.Content
84        data-slot="sheet-content"
85        className={cn(
86          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
87          side === "right" &&
88            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm",
89          side === "left" &&
90            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
91// … truncated