ui/src/components/Drawer.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import * as React from "react";

import { Drawer as VDrawer } from "vaul";

export default function Drawer({
  trigger,
  children,
  width,
  open,
  onOpenChange,
}: any) {
  return (
    <VDrawer.Root direction="right" open={open} onOpenChange={onOpenChange}>
      <VDrawer.Trigger asChild>{trigger}</VDrawer.Trigger>
      <VDrawer.Portal>
        <VDrawer.Overlay className="fixed inset-0 bg-black/40 z-50" />
        <VDrawer.Content
          style={{ width: width || "400px" }}
          className={`bg-white flex flex-col z-50 h-full mt-24 fixed bottom-0 right-0`}
        >
          {children}
        </VDrawer.Content>
      </VDrawer.Portal>
    </VDrawer.Root>
  );
}