jamsrui_drawer_component_with_useDisclosure_controlled_state.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 DrawerUsage() {
15  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
16
17  return (
18    <>
19      <Button onClick={onOpen}>Open Drawer</Button>
20      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
21        <DrawerContent>
22          <DrawerHeader>Drawer Title</DrawerHeader>
23          <DrawerBody>
24            <p>
25              This is the main content area of the drawer. You can place any
26              elements or components here.
27            </p>
28          </DrawerBody>
29          <DrawerFooter>
30            <Button variant="outline" onClick={onClose}>
31              Cancel
32            </Button>
33            <Button onClick={onClose}>Submit</Button>
34          </DrawerFooter>
35        </DrawerContent>
36      </Drawer>
37    </>
38  );
39}