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