"use client"; import { useEffect, useRef } from "react"; import * as motion from "motion/react-client"; import { AnimatePresence } from "motion/react"; import { X } from "lucide-react"; import { cn } from "@/lib/utils"; export type SheetSide = "right" | "left" | "top" | "bottom"; export type SheetProps = { /** Whether the sheet is visible. */ open: boolean; /** Called when the sheet requests to close (backdrop click, escape, close button). */ onClose: () => void; /** Edge the panel slides in from. Defaults to "right". */ side?: SheetSide; /** Optional heading shown at the top of the panel. */ title?: string; /** Panel body. */ children?: React.ReactNode; /** Extra classes for the panel. */ className?: string; }; // Off-screen position per edge, used for both the initial and exit states. const OFFSCREEN: Record = { right: { x: "100%" }, left: { x: "-100%" }, top: { y: "-100%" }, bottom: { y: "100%" }, }; // Edge anchoring + sizing per side. Mirrors navbar's right-side panel. const PANEL_SIDE: Record = { right: "inset-y-0 right-0 w-72 border-l sm:w-80", left: "inset-y-0 left-0 w-72 border-r sm:w-80", top: "inset-x-0 top-0 h-72 border-b", bottom: "inset-x-0 bottom-0 h-72 border-t", }; /** * Animated slide-in panel from a screen edge with a dimmed backdrop. Closes on * backdrop click, escape, or the close button. Locks body scroll while open. * Framework-agnostic and headless about its contents — pass any children. */ export function Sheet({ open, onClose, side = "right", title, children, className, }: SheetProps) { const panelRef = useRef(null); // Escape-to-close. useEffect(() => { if (!open) return; function onKey(e: KeyboardEvent) { if (e.key === "Escape") { e.preventDefault(); onClose(); } } document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); // Body scroll lock — lock on open, restore on close/unmount. useEffect(() => { if (open) document.body.style.overflow = "hidden"; else document.body.style.overflow = ""; return () => { document.body.style.overflow = ""; }; }, [open]); const off = OFFSCREEN[side]; return ( {open && ( <> )} ); }

sheet.