snapme

1"use client"
2
3import * as React from "react"
4import { cn } from "@/lib/utils"
5import { Drawer as DrawerPrimitive } from "vaul"
6
7import { Button } from "@/components/ui/button"
8import { X } from "@phosphor-icons/react"
9
10function Drawer({
11  ...props
12}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
13  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
14}
15
16function DrawerTrigger({
17  ...props
18}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
19  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
20}
21
22function DrawerPortal({
23  ...props
24}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
25  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
26}
27
28function DrawerClose({
29  ...props
30}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
31  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
32}
33
34function DrawerOverlay({
35  className,
36  ...props
37}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
38  return (
39    <DrawerPrimitive.Overlay
40      data-slot="drawer-overlay"
41      className={cn(
42        "fixed inset-0 z-50 bg-ink/60 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
43        className
44      )}
45      {...props}
46    />
47  )
48}
49
50function DrawerContent({
51  className,
52  children,
53  ...props
54}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
55  return (
56    <DrawerPortal data-slot="drawer-portal">
57      <DrawerOverlay />
58      <DrawerPrimitive.Content
59        data-slot="drawer-content"
60        className={cn(
61          "group/drawer-content fixed z-50 flex h-auto flex-col border-ink bg-paper text-sm text-ink 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-panel data-[vaul-drawer-direction=bottom]:border-t-3 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]:rounded-r-panel data-[vaul-drawer-direction=left]:border-r-3 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]:rounded-l-panel data-[vaul-drawer-direction=right]:border-l-3 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-panel data-[vaul-drawer-direction=top]:border-b-3 data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
62          className
63        )}
64        {...props}
65      >
66        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-pill bg-ink group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
67        {children}
68        <DrawerPrimitive.Close asChild>
69          <Button variant="ghost" size="icon" className="absolute top-2 right-2">
70            <X weight="bold" className="size-5" />
71            <span className="sr-only">Tutup</span>
72          </Button>
73        </DrawerPrimitive.Close>
74      </DrawerPrimitive.Content>
75    </DrawerPortal>
76  )
77}
78
79function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
80  return (
81    <div
82      data-slot="drawer-header"
83      className={cn(
84        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
85        className
86      )}
87      {...props}
88    />
89  )
90}
91
92function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
93  return (
94    <div
95      data-slot="drawer-footer"
96      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
97      {...props}
98    />
99  )
100}
101
102function DrawerTitle({
103  className,
104  ...props
105}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
106  return (
107    <DrawerPrimitive.Title
108      data-slot="drawer-title"
109      className={cn("font-display text-lg font-extrabold", className)}
110      {...props}
111    />
112  )
113}
114
115function DrawerDescription({
116  className,
117  ...props
118}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
119  return (
120    <DrawerPrimitive.Description
121      data-slot="drawer-description"
122      className={cn("text-sm text-muted-foreground", className)}
123      {...props}
124    />
125  )
126}
127
128export {
129  Drawer,
130  DrawerPortal,
131  DrawerOverlay,
132  DrawerTrigger,
133  DrawerClose,
134  DrawerContent,
135  DrawerHeader,
136  DrawerFooter,
137  DrawerTitle,
138  DrawerDescription,
139}
140