sheet.tsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. import * as React from 'react'
  2. import * as SheetPrimitive from '@radix-ui/react-dialog'
  3. import { XIcon } from 'lucide-react'
  4. import { cn } from '@/lib/utils'
  5. function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  6. return <SheetPrimitive.Root data-slot='sheet' {...props} />
  7. }
  8. function SheetTrigger({
  9. ...props
  10. }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  11. return <SheetPrimitive.Trigger data-slot='sheet-trigger' {...props} />
  12. }
  13. function SheetClose({
  14. ...props
  15. }: React.ComponentProps<typeof SheetPrimitive.Close>) {
  16. return <SheetPrimitive.Close data-slot='sheet-close' {...props} />
  17. }
  18. function SheetPortal({
  19. ...props
  20. }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  21. return <SheetPrimitive.Portal data-slot='sheet-portal' {...props} />
  22. }
  23. function SheetOverlay({
  24. className,
  25. ...props
  26. }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  27. return (
  28. <SheetPrimitive.Overlay
  29. data-slot='sheet-overlay'
  30. className={cn(
  31. 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
  32. className
  33. )}
  34. {...props}
  35. />
  36. )
  37. }
  38. function SheetContent({
  39. className,
  40. children,
  41. side = 'right',
  42. ...props
  43. }: React.ComponentProps<typeof SheetPrimitive.Content> & {
  44. side?: 'top' | 'right' | 'bottom' | 'left'
  45. }) {
  46. return (
  47. <SheetPortal>
  48. <SheetOverlay />
  49. <SheetPrimitive.Content
  50. data-slot='sheet-content'
  51. className={cn(
  52. 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
  53. side === 'right' &&
  54. 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
  55. side === 'left' &&
  56. 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
  57. side === 'top' &&
  58. 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
  59. side === 'bottom' &&
  60. 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
  61. className
  62. )}
  63. {...props}
  64. >
  65. {children}
  66. <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none'>
  67. <XIcon className='size-4' />
  68. <span className='sr-only'>Close</span>
  69. </SheetPrimitive.Close>
  70. </SheetPrimitive.Content>
  71. </SheetPortal>
  72. )
  73. }
  74. function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
  75. return (
  76. <div
  77. data-slot='sheet-header'
  78. className={cn('flex flex-col gap-1.5 p-4', className)}
  79. {...props}
  80. />
  81. )
  82. }
  83. function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
  84. return (
  85. <div
  86. data-slot='sheet-footer'
  87. className={cn('mt-auto flex flex-col gap-2 p-4', className)}
  88. {...props}
  89. />
  90. )
  91. }
  92. function SheetTitle({
  93. className,
  94. ...props
  95. }: React.ComponentProps<typeof SheetPrimitive.Title>) {
  96. return (
  97. <SheetPrimitive.Title
  98. data-slot='sheet-title'
  99. className={cn('text-foreground font-semibold', className)}
  100. {...props}
  101. />
  102. )
  103. }
  104. function SheetDescription({
  105. className,
  106. ...props
  107. }: React.ComponentProps<typeof SheetPrimitive.Description>) {
  108. return (
  109. <SheetPrimitive.Description
  110. data-slot='sheet-description'
  111. className={cn('text-muted-foreground text-sm', className)}
  112. {...props}
  113. />
  114. )
  115. }
  116. export {
  117. Sheet,
  118. SheetTrigger,
  119. SheetClose,
  120. SheetContent,
  121. SheetHeader,
  122. SheetFooter,
  123. SheetTitle,
  124. SheetDescription,
  125. }