Drawer

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Drawer } from "@/components/ui/drawer";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Open filters</Button>
      <Drawer open={open} onClose={() => setOpen(false)} title="Filters" footer={<><Button variant="ghost" onClick={() => setOpen(false)}>Reset</Button><Button onClick={() => setOpen(false)}>Show 14 teas</Button></>}>
        <div style={{ display: "grid", gap: 12 }}>
          <Checkbox label="Green tea" defaultChecked />
          <Checkbox label="Black tea" />
          <Checkbox label="Under ৳500" />
        </div>
      </Drawer>
    </>
  );
}