sheet

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