UseDisclosureDemo

1'use client';
2 
3import React from 'react';
4 
5import { Button } from '@/components/ui/button';
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from '@/components/ui/card';
14import {
15  Dialog,
16  DialogContent,
17  DialogDescription,
18  DialogFooter,
19  DialogHeader,
20  DialogTitle,
21  DialogTrigger,
22} from '@/components/ui/dialog';
23 
24import { useDisclosure } from '@/hooks/guarahooks/use-disclosure';
25 
26export default function UseDisclosureDemo() {
27  const [isOpen, { close, toggle }] = useDisclosure(false, {
28    onOpen: () => console.log('Dialog opened'),
29    onClose: () => console.log('Dialog closed'),
30  });
31 
32  return (
33    <Card className="relative max-w-sm w-full">
34      <CardHeader>
35        <CardTitle>useDisclosure</CardTitle>
36        <CardDescription>
37          This component uses the <code>useDisclosure</code> hook to manage the
38          state of a dialog component.
39        </CardDescription>
40      </CardHeader>
41      <CardContent>
42        <p>
43          Dialog is: <strong>{isOpen ? 'Open' : 'Closed'}</strong>
44        </p>
45      </CardContent>
46      <CardFooter className="flex gap-2">
47        <Dialog open={isOpen} onOpenChange={toggle}>
48          <DialogTrigger asChild>
49            <Button>Open Dialog</Button>
50          </DialogTrigger>
51          <DialogContent>
52            <DialogHeader>
53              <DialogTitle>Example Dialog</DialogTitle>
54              <DialogDescription>
55                This is an example dialog controlled by the useDisclosure hook.
56              </DialogDescription>
57            </DialogHeader>
58            <DialogFooter>
59              <Button variant="outline" onClick={close}>
60                Close
61              </Button>
62              <Button onClick={close}>Confirm</Button>
63            </DialogFooter>
64          </DialogContent>
65        </Dialog>
66        <Button variant="outline" onClick={toggle}>
67          Toggle Dialog
68        </Button>
69      </CardFooter>
70    </Card>
71  );
72}