add credenza

src/components/Credenza.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { useMediaQuery } from "@app/hooks/useMediaQuery";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+    Drawer,
+    DrawerClose,
+    DrawerContent,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger,
+} from "@/components/ui/drawer";
+
+interface BaseProps {
+    children: React.ReactNode;
+}
+
+interface RootCredenzaProps extends BaseProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+
+interface CredenzaProps extends BaseProps {
+    className?: string;
+    asChild?: true;
+}
+
+const desktop = "(min-width: 768px)";
+
+const Credenza = ({ children, ...props }: RootCredenzaProps) => {
+    const isDesktop = useMediaQuery(desktop);
+    const Credenza = isDesktop ? Dialog : Drawer;
+
+    return <Credenza {...props}>{children}</Credenza>;
+};
+
+const CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) => {
+    const isDesktop = useMediaQuery(desktop);
+    const CredenzaTrigger = isDesktop ? DialogTrigger : DrawerTrigger;
+
+    return (
+        <CredenzaTrigger className={className} {...props}>
+            {children}
+        </CredenzaTrigger>
+    );
+};
+
+const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
+    const isDesktop = useMediaQuery(desktop);
+    const CredenzaClose = isDesktop ? DialogClose : DrawerClose;
+
+    return (
+        <CredenzaClose className={className} {...props}>
+            {children}
+        </CredenzaClose>
+    );
+};
+
+const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
+    const isDesktop = useMediaQuery(desktop);
+    const CredenzaContent = isDesktop ? DialogContent : DrawerContent;
+
+    return (
+        <CredenzaContent className={className} {...props}>
+            {children}
+        </CredenzaContent>
+    );
+};
+
+const CredenzaDescription = ({
+    className,
+    children,
+    ...props
+}: CredenzaProps) => {
+    const isDesktop = useMediaQuery(desktop);
+    const CredenzaDescription = isDesktop
+        ? DialogDescription
+        : DrawerDescription;
+
+    return (
+        <CredenzaDescription className={className} {...props}>
+            {children}
+        </CredenzaDescription>
+    );
+};
+
+const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
+    const isDesktop = useMediaQuery(desktop);
+    const CredenzaHeader = isDesktop ? DialogHeader : DrawerHeader;
+
+    return (
+        <CredenzaHeader className={className} {...props}>
+            {children}
+        </CredenzaHeader>
+    );
+};
+
+const CredenzaTitle = ({ className, children, ...props }: CredenzaProps) => {
+    const isDesktop = useMediaQuery(desktop);
+    const CredenzaTitle = isDesktop ? DialogTitle : DrawerTitle;
+
+    return (
+        <CredenzaTitle className={className} {...props}>
+            {children}
+        </CredenzaTitle>
+    );
+};
+
+const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
+    return (
+        <div className={cn("px-4 md:px-0 mb-4", className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
+    const isDesktop = useMediaQuery(desktop);
+    const CredenzaFooter = isDesktop ? DialogFooter : DrawerFooter;
+
+    return (
+        <CredenzaFooter className={className} {...props}>
+            {children}
+        </CredenzaFooter>
+    );
+};
+
+export {
+    Credenza,
+    CredenzaTrigger,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaHeader,
+    CredenzaTitle,
+    CredenzaBody,
+    CredenzaFooter,
+};

src/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                "fixed left-[50%] top-[30%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
                 className
             )}
             {...props}

src/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+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,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}