A quick vibe-coded site to test response times of PLC.directory mirrors (over 3 attempts)
1import * as React from "react";
2import { Drawer as DrawerPrimitive } from "vaul";
3
4import { cn } from "@/lib/utils";
5
6const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
7 <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
8);
9Drawer.displayName = "Drawer";
10
11const DrawerTrigger = DrawerPrimitive.Trigger;
12
13const DrawerPortal = DrawerPrimitive.Portal;
14
15const DrawerClose = DrawerPrimitive.Close;
16
17const DrawerOverlay = React.forwardRef<
18 React.ElementRef<typeof DrawerPrimitive.Overlay>,
19 React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
20>(({ className, ...props }, ref) => (
21 <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80", className)} {...props} />
22));
23DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
24
25const DrawerContent = React.forwardRef<
26 React.ElementRef<typeof DrawerPrimitive.Content>,
27 React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
28>(({ className, children, ...props }, ref) => (
29 <DrawerPortal>
30 <DrawerOverlay />
31 <DrawerPrimitive.Content
32 ref={ref}
33 className={cn(
34 "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
35 className,
36 )}
37 {...props}
38 >
39 <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
40 {children}
41 </DrawerPrimitive.Content>
42 </DrawerPortal>
43));
44DrawerContent.displayName = "DrawerContent";
45
46const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
47 <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
48);
49DrawerHeader.displayName = "DrawerHeader";
50
51const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
52 <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
53);
54DrawerFooter.displayName = "DrawerFooter";
55
56const DrawerTitle = React.forwardRef<
57 React.ElementRef<typeof DrawerPrimitive.Title>,
58 React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
59>(({ className, ...props }, ref) => (
60 <DrawerPrimitive.Title
61 ref={ref}
62 className={cn("text-lg font-semibold leading-none tracking-tight", className)}
63 {...props}
64 />
65));
66DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
67
68const DrawerDescription = React.forwardRef<
69 React.ElementRef<typeof DrawerPrimitive.Description>,
70 React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
71>(({ className, ...props }, ref) => (
72 <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
73));
74DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
75
76export {
77 Drawer,
78 DrawerPortal,
79 DrawerOverlay,
80 DrawerTrigger,
81 DrawerClose,
82 DrawerContent,
83 DrawerHeader,
84 DrawerFooter,
85 DrawerTitle,
86 DrawerDescription,
87};