deno.land / x / netzo@0.5.16 / components / drawer.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118// @deno-types="npm:@types/react@18.2.60"import * as React from "react";
import { Drawer as DrawerPrimitive } from "../deps/vaul.ts";import { cn } from "./utils.ts";
const Drawer = ({ shouldScaleBackground = true, ...props}: React.ComponentProps<typeof DrawerPrimitive.Root>) => ( <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />);Drawer.displayName = "Drawer";
const DrawerTrigger = DrawerPrimitive.Trigger;
const DrawerPortal = DrawerPrimitive.Portal;
const DrawerClose = DrawerPrimitive.Close;
const DrawerOverlay = React.forwardRef< React.ElementRef<typeof DrawerPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>>(({ className, ...props }, ref) => ( <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80", className)} {...props} />));DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
const DrawerContent = React.forwardRef< React.ElementRef<typeof DrawerPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>>(({ className, children, ...props }, ref) => ( <DrawerPortal> <DrawerOverlay /> <DrawerPrimitive.Content ref={ref} className={cn( "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className, )} {...props} > <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" /> {children} </DrawerPrimitive.Content> </DrawerPortal>));DrawerContent.displayName = "DrawerContent";
const DrawerHeader = ({ className, ...props}: React.HTMLAttributes<HTMLDivElement>) => ( <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />);DrawerHeader.displayName = "DrawerHeader";
const DrawerFooter = ({ className, ...props}: React.HTMLAttributes<HTMLDivElement>) => ( <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />);DrawerFooter.displayName = "DrawerFooter";
const DrawerTitle = React.forwardRef< React.ElementRef<typeof DrawerPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>>(({ className, ...props }, ref) => ( <DrawerPrimitive.Title ref={ref} className={cn( "text-lg font-semibold leading-none tracking-tight", className, )} {...props} />));DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
const DrawerDescription = React.forwardRef< React.ElementRef<typeof DrawerPrimitive.Description>, React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>>(({ className, ...props }, ref) => ( <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />));DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger,};
Version Info