pizza-online
118 строк · 3.0 Кб
1"use client"
2
3import * as React from "react"
4import { Drawer as DrawerPrimitive } from "vaul"
5
6import { cn } from "@/lib/utils"
7
8const Drawer = ({
9shouldScaleBackground = true,
10...props
11}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
12<DrawerPrimitive.Root
13shouldScaleBackground={shouldScaleBackground}
14{...props}
15/>
16)
17Drawer.displayName = "Drawer"
18
19const DrawerTrigger = DrawerPrimitive.Trigger
20
21const DrawerPortal = DrawerPrimitive.Portal
22
23const DrawerClose = DrawerPrimitive.Close
24
25const DrawerOverlay = React.forwardRef<
26React.ElementRef<typeof DrawerPrimitive.Overlay>,
27React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
28>(({ className, ...props }, ref) => (
29<DrawerPrimitive.Overlay
30ref={ref}
31className={cn("fixed inset-0 z-50 bg-black/80", className)}
32{...props}
33/>
34))
35DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
36
37const DrawerContent = React.forwardRef<
38React.ElementRef<typeof DrawerPrimitive.Content>,
39React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
40>(({ className, children, ...props }, ref) => (
41<DrawerPortal>
42<DrawerOverlay />
43<DrawerPrimitive.Content
44ref={ref}
45className={cn(
46"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
47className
48)}
49{...props}
50>
51<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
52{children}
53</DrawerPrimitive.Content>
54</DrawerPortal>
55))
56DrawerContent.displayName = "DrawerContent"
57
58const DrawerHeader = ({
59className,
60...props
61}: React.HTMLAttributes<HTMLDivElement>) => (
62<div
63className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
64{...props}
65/>
66)
67DrawerHeader.displayName = "DrawerHeader"
68
69const DrawerFooter = ({
70className,
71...props
72}: React.HTMLAttributes<HTMLDivElement>) => (
73<div
74className={cn("mt-auto flex flex-col gap-2 p-4", className)}
75{...props}
76/>
77)
78DrawerFooter.displayName = "DrawerFooter"
79
80const DrawerTitle = React.forwardRef<
81React.ElementRef<typeof DrawerPrimitive.Title>,
82React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
83>(({ className, ...props }, ref) => (
84<DrawerPrimitive.Title
85ref={ref}
86className={cn(
87"text-lg font-semibold leading-none tracking-tight",
88className
89)}
90{...props}
91/>
92))
93DrawerTitle.displayName = DrawerPrimitive.Title.displayName
94
95const DrawerDescription = React.forwardRef<
96React.ElementRef<typeof DrawerPrimitive.Description>,
97React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
98>(({ className, ...props }, ref) => (
99<DrawerPrimitive.Description
100ref={ref}
101className={cn("text-sm text-muted-foreground", className)}
102{...props}
103/>
104))
105DrawerDescription.displayName = DrawerPrimitive.Description.displayName
106
107export {
108Drawer,
109DrawerPortal,
110DrawerOverlay,
111DrawerTrigger,
112DrawerClose,
113DrawerContent,
114DrawerHeader,
115DrawerFooter,
116DrawerTitle,
117DrawerDescription,
118}
119