Drawer

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

<Drawer>
  <DrawerTrigger render={<Button variant="outline">Open Drawer</Button>} />
  <DrawerContent>
    <div className="mx-auto flex w-full max-w-sm flex-col gap-4">
      <DrawerHeader>
        <DrawerTitle>Edit profile</DrawerTitle>
        <DrawerDescription>
          Make changes to your profile here. Click save when you're done.
        </DrawerDescription>
      </DrawerHeader>
      <DrawerFooter>
        <Button>Save changes</Button>
        <DrawerClose render={<Button variant="outline">Cancel</Button>} />
      </DrawerFooter>
    </div>
  </DrawerContent>
</Drawer>