CoolFace
Apppublic

huggingface/ai-deadlines

sourceHugging Faceupdated 3d agoView on Hugging Face
781likes
sheet.tsx132 linesDownload Raw Back to ui
1import * as SheetPrimitive from "@radix-ui/react-dialog"2import { cva, type VariantProps } from "class-variance-authority"3import { X } from "lucide-react"4import * as React from "react"5 6import { cn } from "@/lib/utils"7 8const Sheet = SheetPrimitive.Root9 10const SheetTrigger = SheetPrimitive.Trigger11 12const SheetClose = SheetPrimitive.Close13 14const SheetPortal = SheetPrimitive.Portal15 16const SheetOverlay = React.forwardRef<17  React.ElementRef<typeof SheetPrimitive.Overlay>,18  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>19>(({ className, ...props }, ref) => (20  <SheetPrimitive.Overlay21    className={cn(22      "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",23      className24    )}25    {...props}26    ref={ref}27  />28))29SheetOverlay.displayName = SheetPrimitive.Overlay.displayName30 31const sheetVariants = cva(32  "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",33  {34    variants: {35      side: {36        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",37        bottom:38          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",39        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",40        right:41          "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",42      },43    },44    defaultVariants: {45      side: "right",46    },47  }48)49 50interface SheetContentProps51  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,52  VariantProps<typeof sheetVariants> { }53 54const SheetContent = React.forwardRef<55  React.ElementRef<typeof SheetPrimitive.Content>,56  SheetContentProps57>(({ side = "right", className, children, ...props }, ref) => (58  <SheetPortal>59    <SheetOverlay />60    <SheetPrimitive.Content61      ref={ref}62      className={cn(sheetVariants({ side }), className)}63      {...props}64    >65      {children}66      <SheetPrimitive.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">67        <X className="h-4 w-4" />68        <span className="sr-only">Close</span>69      </SheetPrimitive.Close>70    </SheetPrimitive.Content>71  </SheetPortal>72))73SheetContent.displayName = SheetPrimitive.Content.displayName74 75const SheetHeader = ({76  className,77  ...props78}: React.HTMLAttributes<HTMLDivElement>) => (79  <div80    className={cn(81      "flex flex-col space-y-2 text-center sm:text-left",82      className83    )}84    {...props}85  />86)87SheetHeader.displayName = "SheetHeader"88 89const SheetFooter = ({90  className,91  ...props92}: React.HTMLAttributes<HTMLDivElement>) => (93  <div94    className={cn(95      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",96      className97    )}98    {...props}99  />100)101SheetFooter.displayName = "SheetFooter"102 103const SheetTitle = React.forwardRef<104  React.ElementRef<typeof SheetPrimitive.Title>,105  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>106>(({ className, ...props }, ref) => (107  <SheetPrimitive.Title108    ref={ref}109    className={cn("text-lg font-semibold text-foreground", className)}110    {...props}111  />112))113SheetTitle.displayName = SheetPrimitive.Title.displayName114 115const SheetDescription = React.forwardRef<116  React.ElementRef<typeof SheetPrimitive.Description>,117  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>118>(({ className, ...props }, ref) => (119  <SheetPrimitive.Description120    ref={ref}121    className={cn("text-sm text-muted-foreground", className)}122    {...props}123  />124))125SheetDescription.displayName = SheetPrimitive.Description.displayName126 127export {128  Sheet, SheetClose,129  SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger130}131 132