UseTimeoutDemo

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';
14 
15import { useTimeout } from '@/hooks/guarahooks/use-timeout';
16 
17export default function UseTimeoutDemo() {
18  const [message, setMessage] = useState('Click "Start" to begin the timeout.');
19  const [active, setActive] = useState(false);
20 
21  // Execute callback after 3 seconds when active is true
22  useTimeout(
23    () => {
24      setMessage('Timeout expired!');
25      setActive(false);
26    },
27    active ? 3000 : null,
28  );
29 
30  return (
31    <Card className="relative max-w-sm w-full">
32      <CardHeader>
33        <CardTitle>useTimeout</CardTitle>
34        <CardDescription>
35          This component demonstrates the <code>useTimeout</code> hook. Click
36          start to trigger a timeout.
37        </CardDescription>
38      </CardHeader>
39      <CardContent>
40        <p className="text-lg font-bold">{message}</p>
41      </CardContent>
42      <CardFooter className="space-x-2">
43        <Button
44          onClick={() => {
45            setMessage('Waiting for timeout...');
46            setActive(true);
47          }}
48        >
49          Start
50        </Button>
51        <Button
52          variant="secondary"
53          onClick={() => {
54            setMessage('Click "Start" to begin the timeout.');
55            setActive(false);
56          }}
57        >
58          Reset
59        </Button>
60      </CardFooter>
61    </Card>
62  );
63}