UseConfirmDemo

1'use client';
2 
3import React, { useState } 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 { ConfirmationStatus, useConfirm } from '@/hooks/guarahooks/use-confirm';
25 
26export default function UseConfirmDemo() {
27  const [open, setOpen] = useState(false);
28  const { status, confirm, cancel, reset } = useConfirm();
29 
30  const getStatusMessage = (status: ConfirmationStatus) => {
31    switch (status) {
32      case 'idle':
33        return 'Waiting for action...';
34      case 'confirming':
35        return 'Are you sure?';
36      case 'confirmed':
37        return 'Action confirmed!';
38      case 'cancelled':
39        return 'Action cancelled!';
40    }
41  };
42 
43  const handleConfirm = () => {
44    confirm();
45    setOpen(false);
46  };
47 
48  const handleCancel = () => {
49    cancel();
50    setOpen(false);
51  };
52 
53  return (
54    <Card className="relative max-w-sm w-full">
55      <CardHeader>
56        <CardTitle>useConfirm</CardTitle>
57        <CardDescription>
58          This component uses the <code>useConfirm</code> hook to handle user
59          confirmation actions.
60        </CardDescription>
61      </CardHeader>
62      <CardContent>
63        <p>
64          Status: <strong>{getStatusMessage(status)}</strong>
65        </p>
66      </CardContent>
67      <CardFooter className="flex gap-2">
68        <Dialog open={open} onOpenChange={setOpen}>
69          <DialogTrigger asChild>
70            <Button>Delete Item</Button>
71          </DialogTrigger>
72          <DialogContent>
73            <DialogHeader>
74              <DialogTitle>Delete Item</DialogTitle>
75              <DialogDescription>
76                Are you sure you want to delete this item? This action cannot be
77                undone.
78              </DialogDescription>
79            </DialogHeader>
80            <DialogFooter>
81              <Button variant="outline" onClick={handleCancel}>
82                Cancel
83              </Button>
84              <Button variant="destructive" onClick={handleConfirm}>
85                Delete
86              </Button>
87            </DialogFooter>
88          </DialogContent>
89        </Dialog>
90        {(status === 'confirmed' || status === 'cancelled') && (
91          <Button onClick={reset}>Reset</Button>
92        )}
93      </CardFooter>
94// … truncated