Drawer

"use client";
import { useEffect, useState } from "react";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

type State = "closed" | "right" | "bottom";

export function Drawer({ state = "right" }: { state?: State }) {
const [open, setOpen] = useState(state !== "closed");
useEffect(() => setOpen(state !== "closed"), [state]);
const bottom = state === "bottom";

return (
  <div className="relative h-[300px] w-full max-w-md overflow-hidden rounded-lg border border-border bg-background/30">
    <div className="grid h-full place-items-center">
      <button
        onClick={() => setOpen(true)}
        className="rounded-md border border-border bg-background/50 px-3 py-1.5 font-mono text-xs hover:border-lab-accent"
      >
        開啟 drawer
      </button>
    </div>
    {open && (
      <>
        <div
          onClick={() => setOpen(false)}
          className="absolute inset-0 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
        />
        <aside
          className={cn(
            "absolute border-border bg-background p-4 shadow-xl",
            bottom
              ? "inset-x-0 bottom-0 rounded-t-2xl border-t animate-in slide-in-from-bottom duration-300"
              : "inset-y-0 right-0 w-3/4 border-l animate-in slide-in-from-right duration-300",
          )}
        >
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-medium">{bottom ? "底部 sheet" : "右側 drawer"}</h3>
            <button onClick={() => setOpen(false)} className="text-muted-foreground hover:text-foreground">
              <X className="h-4 w-4" />
            </button>
          </div>
          <ul className="mt-4 space-y-2 text-xs text-muted-foreground">
            <li className="rounded-md bg-background/40 px-2 py-1.5">選項一</li>
            <li className="rounded-md bg-background/40 px-2 py-1.5">選項二</li>
            <li className="rounded-md bg-background/40 px-2 py-1.5">選項三</li>
          </ul>
        </aside>
      </>
    )}
  </div>
);
}