Sheet

1"use client";
2 
3import * as SheetPrimitive from "@radix-ui/react-dialog";
4import { cva, type VariantProps } from "class-variance-authority";
5import { X } from "lucide-react";
6import { forwardRef } from "react";
7import { cn } from "@/lib/utils";
8import { Button } from "@/components/ui/button";
9 
10export const Sheet = SheetPrimitive.Root;
11export const SheetTrigger = SheetPrimitive.Trigger;
12export const SheetClose = SheetPrimitive.Close;
13export const SheetPortal = SheetPrimitive.Portal;
14 
15export const SheetOverlay = forwardRef<
16  HTMLDivElement,
17  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
18>(({ className, ...props }, ref) => (
19  <SheetPrimitive.Overlay
20    className={cn(
21      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22      className,
23    )}
24    {...props}
25    ref={ref}
26  />
27));
28SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
29 
30const sheetContentVariants = cva(
31  cn(
32    "bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50",
33    "fixed z-50 flex flex-col gap-4 p-6 shadow-lg transition ease-in-out",
34    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
35  ),
36  {
37    variants: {
38      side: {
39        top: "inset-x-0 top-0 rounded-b-[32px] border-b border-zinc-200 dark:border-white/10 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
40        bottom:
41          "inset-x-0 bottom-0 rounded-t-[32px] border-t border-zinc-200 dark:border-white/10 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
42        left: "inset-y-0 left-0 h-full w-3/4 max-w-sm rounded-r-[32px] border-r border-zinc-200 dark:border-white/10 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md",
43        right:
44          "inset-y-0 right-0 h-full w-3/4 max-w-sm rounded-l-[32px] border-l border-zinc-200 dark:border-white/10 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md",
45      },
46    },
47    defaultVariants: {
48      side: "right",
49    },
50  },
51);
52 
53export interface SheetContentProps
54  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
55    VariantProps<typeof sheetContentVariants> {}
56 
57export const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(
58// … truncated