jamsrui_drawer_side_panel_with_useDisclosure_hook.ts

1"use client";
2
3import React from "react";
4import {
5  Drawer,
6  DrawerContent,
7  DrawerHeader,
8  DrawerBody,
9  DrawerFooter,
10  useDisclosure,
11} from "@jamsrui/drawer";
12import { Button } from "@jamsrui/button";
13
14export default function App() {
15  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
16
17  return (
18    <div className="flex flex-col gap-2">
19      <Button variant="filled" color="primary" onClick={onOpen}>
20        Open Drawer
21      </Button>
22      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
23        <DrawerContent>
24          <DrawerHeader>Drawer Title</DrawerHeader>
25          <DrawerBody>
26            <p>
27              This is the content of the drawer. You can place any components or
28              text here.
29            </p>
30          </DrawerBody>
31          <DrawerFooter>
32            <Button variant="light" color="danger" onClick={onClose}>
33              Close
34            </Button>
35            <Button variant="filled" color="primary" onClick={onClose}>
36              Action
37            </Button>
38          </DrawerFooter>
39        </DrawerContent>
40      </Drawer>
41    </div>
42  );
43}