Side Sheet

"use client";
import { useState } from "react";

export function SideSheet({ title, children }: { title: string; children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)} className="rounded-lg border border-border px-4 py-2 text-sm">Open Sheet</button>
      {open && (
        <>
          <div className="fixed inset-0 z-30 bg-black/40" onClick={() => setOpen(false)} />
          <div role="dialog" aria-modal className="fixed right-0 top-0 z-40 h-full w-80 animate-[slideRight_0.3s_ease-out] border-l border-border bg-card p-6 shadow-xl">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold">{title}</h3>
              <button onClick={() => setOpen(false)} aria-label="Close" className="text-muted-foreground">✕</button>
            </div>
            <div className="mt-4 text-sm text-muted-foreground">{children}</div>
          </div>
        </>
      )}
    </>
  );
}