diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx index ad08671..6d45760 100644 --- a/src/components/ui/drawer.tsx +++ b/src/components/ui/drawer.tsx @@ -1,32 +1,24 @@ -"use client" +"use client"; -import * as React from "react" -import { Drawer as DrawerPrimitive } from "vaul" +import * as React from "react"; +import { Drawer as DrawerPrimitive } from "vaul"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -function Drawer({ - ...props -}: React.ComponentProps) { - return +function Drawer({ ...props }: React.ComponentProps) { + return ; } -function DrawerTrigger({ - ...props -}: React.ComponentProps) { - return +function DrawerTrigger({ ...props }: React.ComponentProps) { + return ; } -function DrawerPortal({ - ...props -}: React.ComponentProps) { - return +function DrawerPortal({ ...props }: React.ComponentProps) { + return ; } -function DrawerClose({ - ...props -}: React.ComponentProps) { - return +function DrawerClose({ ...props }: React.ComponentProps) { + return ; } function DrawerOverlay({ @@ -38,11 +30,11 @@ function DrawerOverlay({ data-slot="drawer-overlay" className={cn( "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", - className + className, )} {...props} /> - ) + ); } function DrawerContent({ @@ -59,9 +51,9 @@ function DrawerContent({ "group/drawer-content fixed z-50 flex h-auto flex-col bg-background", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", - "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", - "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", - className + "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:max-w-sm", + "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:max-w-sm", + className, )} {...props} > @@ -69,7 +61,7 @@ function DrawerContent({ {children} - ) + ); } function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -77,12 +69,12 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
- ) + ); } function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -92,20 +84,17 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} /> - ) + ); } -function DrawerTitle({ - className, - ...props -}: React.ComponentProps) { +function DrawerTitle({ className, ...props }: React.ComponentProps) { return ( - ) + ); } function DrawerDescription({ @@ -118,7 +107,7 @@ function DrawerDescription({ className={cn("text-sm text-muted-foreground", className)} {...props} /> - ) + ); } export { @@ -132,4 +121,4 @@ export { DrawerFooter, DrawerTitle, DrawerDescription, -} +};