Drawer

import {
  Button,
  Drawer,
  DrawerClose,
  DrawerFooter,
  DrawerHeader,
  DrawerPanel,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

export default function Particle() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
      <Drawer>
        <DrawerTrigger render={<Button variant="outline" />}>
          Scrollable content
        </DrawerTrigger>
        <DrawerPopup showBar>
          <DrawerHeader>
            <DrawerTitle>Scrollable content</DrawerTitle>
          </DrawerHeader>
          <DrawerPanel>
            <div className="flex flex-col gap-2">
              {Array.from({ length: 48 }, (_, i) => `box-${i}`).map((key) => (
                <div
                  className="h-12 shrink-0 rounded-xl border bg-muted"
                  key={key}
                />
              ))}
            </div>
          </DrawerPanel>
          <DrawerFooter>
            <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
          </DrawerFooter>
        </DrawerPopup>
      </Drawer>
    </div>
  );
}