123 lines
3.4 KiB
TypeScript
123 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import * as SheetPrimitive from '@radix-ui/react-dialog'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { IconClose } from '@/components/ui/icons'
|
|
|
|
const Sheet = SheetPrimitive.Root
|
|
|
|
const SheetTrigger = SheetPrimitive.Trigger
|
|
|
|
const SheetClose = SheetPrimitive.Close
|
|
|
|
const SheetPortal = ({
|
|
className,
|
|
children,
|
|
...props
|
|
}: SheetPrimitive.DialogPortalProps) => (
|
|
<SheetPrimitive.Portal
|
|
className={cn('fixed inset-0 z-50 flex', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</SheetPrimitive.Portal>
|
|
)
|
|
SheetPortal.displayName = SheetPrimitive.Portal.displayName
|
|
|
|
const SheetOverlay = React.forwardRef<
|
|
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<SheetPrimitive.Overlay
|
|
className={cn(
|
|
'fixed inset-0 z-50 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
|
|
className
|
|
)}
|
|
{...props}
|
|
ref={ref}
|
|
/>
|
|
))
|
|
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
|
|
|
const SheetContent = React.forwardRef<
|
|
React.ElementRef<typeof SheetPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<SheetPortal>
|
|
<SheetPrimitive.Content
|
|
ref={ref}
|
|
className={cn(
|
|
'fixed z-50 h-full border-r bg-background p-6 opacity-100 shadow-lg data-[state=closed]:animate-slide-to-left data-[state=open]:animate-slide-from-left',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
<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">
|
|
<IconClose />
|
|
<span className="sr-only">Close</span>
|
|
</SheetPrimitive.Close>
|
|
</SheetPrimitive.Content>
|
|
</SheetPortal>
|
|
))
|
|
SheetContent.displayName = SheetPrimitive.Content.displayName
|
|
|
|
const SheetHeader = ({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
<div className={cn('flex flex-col space-y-2', className)} {...props} />
|
|
)
|
|
SheetHeader.displayName = 'SheetHeader'
|
|
|
|
const SheetFooter = ({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
SheetFooter.displayName = 'SheetFooter'
|
|
|
|
const SheetTitle = React.forwardRef<
|
|
React.ElementRef<typeof SheetPrimitive.Title>,
|
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
|
>(({ className, ...props }, ref) => (
|
|
<SheetPrimitive.Title
|
|
ref={ref}
|
|
className={cn('text-lg font-semibold text-foreground', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
|
|
|
const SheetDescription = React.forwardRef<
|
|
React.ElementRef<typeof SheetPrimitive.Description>,
|
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
|
>(({ className, ...props }, ref) => (
|
|
<SheetPrimitive.Description
|
|
ref={ref}
|
|
className={cn('text-sm text-muted-foreground', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
|
|
|
export {
|
|
Sheet,
|
|
SheetTrigger,
|
|
SheetClose,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetFooter,
|
|
SheetTitle,
|
|
SheetDescription
|
|
}
|