Drawer

"use client";

import * as React from "react";
import Drawer, { DrawerHandle } from "@/components/ui/drawer";

export default function DrawerDemo() {
  const filtersRef = React.useRef<DrawerHandle>(null);
  const [picked, setPicked] = React.useState("");

  return (
    <div className="flex min-h-[420px] w-full flex-col items-start gap-3 p-8">
      <button
        type="button"
        onClick={() => filtersRef.current?.show()}
        className="inline-flex items-center rounded-md bg-[#8C6BFF] px-3 py-1.5 text-sm font-medium text-white hover:brightness-110"
      >
        Filters
      </button>
      <Drawer
        ref={filtersRef}
        heading="Filters"
        onOpenChange={(isOpen, _reason, value) => {
          if (!isOpen) setPicked(value ?? "");
        }}
        footer={
          <>
            <button
              type="button"
              data-sb-close="reset"
              className="rounded-md px-3 py-1.5 text-sm font-medium text-[#AEBBDD] hover:text-[#F3F4FA]"
            >
              Reset
            </button>
            <button
              type="button"
              data-sb-close="apply"
              className="rounded-md bg-[#8C6BFF] px-3 py-1.5 text-sm font-medium text-white"
            >
              Apply
            </button>
          </>
        }
      >
        <p>Planets with rings, in the outer system.</p>
      </Drawer>
      {picked && <p className="text-sm text-[#AEBBDD]">You chose: {picked}</p>}
    </div>
  );
}