draupnir4all-web

git clone git://archive.git.mtrnord.blog/MTRNord/draupnir4all-web.git
Log | Files | Refs | README | LICENSE

sheet.tsx (3970B)

      1 "use client"
      2 
      3 import { Root, Trigger, Close, Portal, Overlay, Content, Title, Description } from "@radix-ui/react-dialog"
      4 import { cva, type VariantProps } from "class-variance-authority"
      5 import { X } from "lucide-react"
      6 
      7 import { cn } from "@/lib/utils"
      8 import { ComponentPropsWithoutRef, ComponentRef, forwardRef, HTMLAttributes } from "react"
      9 
     10 const Sheet = Root
     11 
     12 const SheetTrigger = Trigger
     13 
     14 const SheetClose = Close
     15 
     16 const SheetPortal = Portal
     17 
     18 const SheetOverlay = forwardRef<
     19   ComponentRef<typeof Overlay>,
     20   ComponentPropsWithoutRef<typeof Overlay>
     21 >(({ className, ...props }, ref) => (
     22   <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 ))
     31 SheetOverlay.displayName = Overlay.displayName
     32 
     33 const 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 
     52 interface SheetContentProps
     53   extends ComponentPropsWithoutRef<typeof Content>,
     54   VariantProps<typeof sheetVariants> { }
     55 
     56 const SheetContent = forwardRef<
     57   ComponentRef<typeof Content>,
     58   SheetContentProps
     59 >(({ side = "right", className, children, ...props }, ref) => (
     60   <SheetPortal>
     61     <SheetOverlay />
     62     <Content
     63       ref={ref}
     64       className={cn(sheetVariants({ side }), className)}
     65       {...props}
     66     >
     67       {children}
     68       <Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
     69         <X className="h-4 w-4" />
     70         <span className="sr-only">Close</span>
     71       </Close>
     72     </Content>
     73   </SheetPortal>
     74 ))
     75 SheetContent.displayName = Content.displayName
     76 
     77 const SheetHeader = ({
     78   className,
     79   ...props
     80 }: HTMLAttributes<HTMLDivElement>) => (
     81   <div
     82     className={cn(
     83       "flex flex-col space-y-2 text-center sm:text-left",
     84       className
     85     )}
     86     {...props}
     87   />
     88 )
     89 SheetHeader.displayName = "SheetHeader"
     90 
     91 const SheetFooter = ({
     92   className,
     93   ...props
     94 }: HTMLAttributes<HTMLDivElement>) => (
     95   <div
     96     className={cn(
     97       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
     98       className
     99     )}
    100     {...props}
    101   />
    102 )
    103 SheetFooter.displayName = "SheetFooter"
    104 
    105 const SheetTitle = forwardRef<
    106   ComponentRef<typeof Title>,
    107   ComponentPropsWithoutRef<typeof Title>
    108 >(({ className, ...props }, ref) => (
    109   <Title
    110     ref={ref}
    111     className={cn("text-lg font-semibold text-foreground", className)}
    112     {...props}
    113   />
    114 ))
    115 SheetTitle.displayName = Title.displayName
    116 
    117 const SheetDescription = forwardRef<
    118   ComponentRef<typeof Description>,
    119   ComponentPropsWithoutRef<typeof Description>
    120 >(({ className, ...props }, ref) => (
    121   <Description
    122     ref={ref}
    123     className={cn("text-sm text-muted-foreground", className)}
    124     {...props}
    125   />
    126 ))
    127 SheetDescription.displayName = Description.displayName
    128 
    129 export {
    130   Sheet,
    131   SheetPortal,
    132   SheetOverlay,
    133   SheetTrigger,
    134   SheetClose,
    135   SheetContent,
    136   SheetHeader,
    137   SheetFooter,
    138   SheetTitle,
    139   SheetDescription,
    140 }