Drawer Slide

"use client";
import { useState } from "react";
import { DrawerSlide } from "@/components/ui/drawer-slide";

export default function Example() {
  const [drawerOpen, setDrawerOpen] = useState(false);
  return (
    <>
      <div className="flex items-center justify-center p-20">
        <button
          onClick={() => setDrawerOpen(true)}
          className="px-6 py-3 rounded-lg bg-purple-600 hover:bg-purple-500 text-white transition-colors font-medium"
        >
          Open Drawer
        </button>
      </div>
      <DrawerSlide isOpen={drawerOpen} onClose={() => setDrawerOpen(false)}>
        <h3 className="text-xl font-bold mb-4 text-white">Drawer Content</h3>
        <p className="text-neutral-400 mb-4">
          This drawer slides in from the right with spring physics. You can drag it to dismiss.
        </p>
        <button
          onClick={() => setDrawerOpen(false)}
          className="px-4 py-2 rounded-lg bg-neutral-800 hover:bg-neutral-700 text-white transition-colors text-sm"
        >
          Close Drawer
        </button>
      </DrawerSlide>
    </>
  );
}