forked from dubinc/dub
-
Notifications
You must be signed in to change notification settings - Fork 0
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
1 parent
c3acad1
commit 798cb3c
Showing
2 changed files
with
119 additions
and
149 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,105 +1,60 @@ | ||
| "use client"; | ||
|
|
||
| import { cn } from "@dub/utils"; | ||
| import * as SheetPrimitive from "@radix-ui/react-dialog"; | ||
| import { X } from "lucide-react"; | ||
| import * as React from "react"; | ||
|
|
||
| const Sheet = SheetPrimitive.Root; | ||
|
|
||
| const SheetTrigger = SheetPrimitive.Trigger; | ||
|
|
||
| const SheetClose = SheetPrimitive.Close; | ||
|
|
||
| const SheetPortal = SheetPrimitive.Portal; | ||
|
|
||
| interface SheetContentProps | ||
| extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {} | ||
|
|
||
| const SheetContent = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Content>, | ||
| SheetContentProps | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SheetPortal> | ||
| <SheetPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| "fixed inset-y-0 right-0 z-50 h-full w-3/4 gap-4 border-l border-gray-200 bg-white p-6 shadow-xl transition ease-in-out sm:max-w-sm", | ||
| "data-[state=closed]:animate-slide-out-to-right data-[state=open]:animate-slide-in-from-right data-[state=closed]:duration-300 data-[state=open]:duration-500", | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| <SheetPrimitive.Close className="absolute right-4 top-4 rounded-md p-1 transition-colors hover:bg-gray-100 focus:outline-none focus:ring-0 disabled:pointer-events-none data-[state=open]:bg-gray-100"> | ||
| <X className="size-4" /> | ||
| <span className="sr-only">Close</span> | ||
| </SheetPrimitive.Close> | ||
| {children} | ||
| </SheetPrimitive.Content> | ||
| </SheetPortal> | ||
| )); | ||
| SheetContent.displayName = SheetPrimitive.Content.displayName; | ||
|
|
||
| const SheetHeader = ({ | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col space-y-2 text-center sm:text-left", | ||
| 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-foreground text-lg font-semibold", 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-muted-foreground text-sm", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| SheetDescription.displayName = SheetPrimitive.Description.displayName; | ||
|
|
||
| export { | ||
| Sheet, | ||
| SheetClose, | ||
| SheetContent, | ||
| SheetDescription, | ||
| SheetFooter, | ||
| SheetHeader, | ||
| SheetPortal, | ||
| SheetTitle, | ||
| SheetTrigger, | ||
| }; | ||
| import { ComponentProps } from "react"; | ||
| import { ContentProps, Drawer } from "vaul"; | ||
|
|
||
| function SheetRoot({ | ||
| children, | ||
| contentProps, | ||
| ...rest | ||
| }: { contentProps?: ContentProps } & ComponentProps<typeof Drawer.Root>) { | ||
| return ( | ||
| <Drawer.Root direction="right" {...rest}> | ||
| <Drawer.Portal> | ||
| <Drawer.Overlay className="fixed inset-0 bg-black/20" /> | ||
| <Drawer.Content | ||
| {...contentProps} | ||
| className={cn( | ||
| "fixed bottom-2 right-2 top-2 z-10 flex w-[calc(100%-16px)] outline-none md:w-[540px]", | ||
| contentProps?.className, | ||
| )} | ||
| style={ | ||
| // 8px between edge of screen and drawer | ||
| { | ||
| "--initial-transform": "calc(100% + 8px)", | ||
| ...contentProps?.style, | ||
| } as React.CSSProperties | ||
| } | ||
| > | ||
| <div className="scrollbar-hide flex size-full grow flex-col overflow-y-auto rounded-lg bg-white"> | ||
| {children} | ||
| </div> | ||
| </Drawer.Content> | ||
| </Drawer.Portal> | ||
| </Drawer.Root> | ||
| ); | ||
| } | ||
|
|
||
| function Title({ className, ...rest }: ComponentProps<typeof Drawer.Title>) { | ||
| return ( | ||
| <Drawer.Title | ||
| className={cn("text-xl font-medium text-zinc-900", className)} | ||
| {...rest} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function Description(props: ComponentProps<typeof Drawer.Description>) { | ||
| return <Drawer.Description {...props} />; | ||
| } | ||
|
|
||
| function Close(props: ComponentProps<typeof Drawer.Close>) { | ||
| return <Drawer.Close {...props} />; | ||
| } | ||
|
|
||
| export const Sheet = Object.assign(SheetRoot, { | ||
| Title, | ||
| Description, | ||
| Close, | ||
| }); |