-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
119 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| "use client"; | ||
|
|
||
| import * as SheetPrimitive from "@radix-ui/react-dialog"; | ||
| import { type VariantProps, cva } from "class-variance-authority"; | ||
| import { cn } from "cn"; | ||
| import { XIcon } from "lucide-react"; | ||
| import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from "react"; | ||
|
|
||
| const Sheet = SheetPrimitive.Root; | ||
| const SheetTrigger = SheetPrimitive.Trigger; | ||
| const SheetClose = SheetPrimitive.Close; | ||
| const SheetPortal = SheetPrimitive.Portal; | ||
|
|
||
| const sheetVariants = cva( | ||
| "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500", | ||
| { | ||
| variants: { | ||
| side: { | ||
| top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b", | ||
| bottom: | ||
| "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t", | ||
| left: "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", | ||
| right: | ||
| "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", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| side: "right", | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| const SheetOverlay = forwardRef< | ||
| ElementRef<typeof SheetPrimitive.Overlay>, | ||
| ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> | ||
| >(({ className, ...props }, ref) => { | ||
| return ( | ||
| <SheetPrimitive.Overlay | ||
| className={cn( | ||
| "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in", | ||
| className, | ||
| )} | ||
| {...props} | ||
| ref={ref} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| interface SheetContentProps | ||
| extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, | ||
| VariantProps<typeof sheetVariants> {} | ||
|
|
||
| const SheetContent = forwardRef<ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>( | ||
| ({ side = "right", className, children, ...props }, ref) => { | ||
| return ( | ||
| <SheetPortal> | ||
| <SheetOverlay /> | ||
| <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}> | ||
| <SheetPrimitive.Close className="absolute top-4 right-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"> | ||
| <XIcon className="size-4" /> | ||
| <span className="sr-only">Close</span> | ||
| </SheetPrimitive.Close> | ||
| {children} | ||
| </SheetPrimitive.Content> | ||
| </SheetPortal> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| const SheetHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => { | ||
| return <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />; | ||
| }; | ||
|
|
||
| const SheetFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => { | ||
| return <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />; | ||
| }; | ||
|
|
||
| const SheetTitle = forwardRef< | ||
| ElementRef<typeof SheetPrimitive.Title>, | ||
| ComponentPropsWithoutRef<typeof SheetPrimitive.Title> | ||
| >(({ className, ...props }, ref) => { | ||
| return ( | ||
| <SheetPrimitive.Title ref={ref} className={cn("font-semibold text-foreground text-lg", className)} {...props} /> | ||
| ); | ||
| }); | ||
|
|
||
| const SheetDescription = forwardRef< | ||
| ElementRef<typeof SheetPrimitive.Description>, | ||
| ComponentPropsWithoutRef<typeof SheetPrimitive.Description> | ||
| >(({ className, ...props }, ref) => { | ||
| return <SheetPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />; | ||
| }); | ||
|
|
||
| SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; | ||
| SheetDescription.displayName = SheetPrimitive.Description.displayName; | ||
| SheetTitle.displayName = SheetPrimitive.Title.displayName; | ||
| SheetFooter.displayName = "SheetFooter"; | ||
| SheetHeader.displayName = "SheetHeader"; | ||
| SheetContent.displayName = SheetPrimitive.Content.displayName; | ||
|
|
||
| export { | ||
| Sheet, | ||
| SheetPortal, | ||
| SheetOverlay, | ||
| SheetTrigger, | ||
| SheetClose, | ||
| SheetContent, | ||
| SheetHeader, | ||
| SheetFooter, | ||
| SheetTitle, | ||
| SheetDescription, | ||
| }; |