FLASHback1/bingo

1'use client'2 3import * as React from 'react'4import * as SheetPrimitive from '@radix-ui/react-dialog'5 6import { cn } from '@/lib/utils'7import { IconClose } from '@/components/ui/icons'8 9const Sheet = SheetPrimitive.Root10 11const SheetTrigger = SheetPrimitive.Trigger12 13const SheetClose = SheetPrimitive.Close14 15const SheetPortal = ({16  className,17  children,18  ...props19}: SheetPrimitive.DialogPortalProps) => (20  <SheetPrimitive.Portal21    className={cn('fixed inset-0 z-50 flex', className)}22    {...props}23  >24    {children}25  </SheetPrimitive.Portal>26)27SheetPortal.displayName = SheetPrimitive.Portal.displayName28 29const SheetOverlay = React.forwardRef<30  React.ElementRef<typeof SheetPrimitive.Overlay>,31  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>32>(({ className, children, ...props }, ref) => (33  <SheetPrimitive.Overlay34    className={cn(35      'fixed inset-0 z-50 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',36      className37    )}38    {...props}39    ref={ref}40  />41))42SheetOverlay.displayName = SheetPrimitive.Overlay.displayName43 44const SheetContent = React.forwardRef<45  React.ElementRef<typeof SheetPrimitive.Content>,46  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>47>(({ className, children, ...props }, ref) => (48  <SheetPortal>49    <SheetPrimitive.Content50      ref={ref}51      className={cn(52        'fixed inset-y-0 left-0 z-50 h-full border-r bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left data-[state=closed]:duration-300 data-[state=open]:duration-500 sm:max-w-sm',53        className54      )}55      {...props}56    >57      {children}58      <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">59        <IconClose />60        <span className="sr-only">Close</span>61      </SheetPrimitive.Close>62    </SheetPrimitive.Content>63  </SheetPortal>64))65SheetContent.displayName = SheetPrimitive.Content.displayName66 67const SheetHeader = ({68  className,69  ...props70}: React.HTMLAttributes<HTMLDivElement>) => (71  <div className={cn('flex flex-col space-y-2', className)} {...props} />72)73SheetHeader.displayName = 'SheetHeader'74 75const SheetFooter = ({76  className,77  ...props78}: React.HTMLAttributes<HTMLDivElement>) => (79  <div80    className={cn(81      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',82      className83    )}84    {...props}85  />86)87SheetFooter.displayName = 'SheetFooter'88 89const SheetTitle = React.forwardRef<90  React.ElementRef<typeof SheetPrimitive.Title>,91  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>92>(({ className, ...props }, ref) => (93  <SheetPrimitive.Title94    ref={ref}95    className={cn('text-lg font-semibold text-foreground', className)}96    {...props}97  />98))99SheetTitle.displayName = SheetPrimitive.Title.displayName100 101const SheetDescription = React.forwardRef<102  React.ElementRef<typeof SheetPrimitive.Description>,103  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>104>(({ className, ...props }, ref) => (105  <SheetPrimitive.Description106    ref={ref}107    className={cn('text-sm text-muted-foreground', className)}108    {...props}109  />110))111SheetDescription.displayName = SheetPrimitive.Description.displayName112 113export {114  Sheet,115  SheetTrigger,116  SheetClose,117  SheetContent,118  SheetHeader,119  SheetFooter,120  SheetTitle,121  SheetDescription122}123