UseIntervalDemo

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 { useInterval } from '@/hooks/guarahooks/use-interval';
16 
17export default function UseIntervalDemo() {
18  const [count, setCount] = useState(0);
19 
20  // Increment the count every second
21  useInterval(() => {
22    setCount((prev) => prev + 1);
23  }, 1000);
24 
25  return (
26    <Card className="relative max-w-sm w-full">
27      <CardHeader>
28        <CardTitle>useInterval</CardTitle>
29        <CardDescription>
30          This component uses the <code>useInterval</code> hook to increment a
31          counter every second.
32        </CardDescription>
33      </CardHeader>
34      <CardContent>
35        <p className="text-lg font-bold">Count: {count}</p>
36      </CardContent>
37      <CardFooter>
38        <Button onClick={() => setCount(0)}>Reset</Button>
39      </CardFooter>
40    </Card>
41  );
42}