UsePreviousDemo

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 { usePrevious } from '@/hooks/guarahooks/use-previous';
16 
17export default function UsePreviousDemo() {
18  const [count, setCount] = useState(0);
19  const previousCount = usePrevious(count);
20 
21  return (
22    <Card className="relative max-w-md w-full">
23      <CardHeader>
24        <CardTitle>Previous Count</CardTitle>
25        <CardDescription>
26          This is a demo of the usePrevious hook.
27        </CardDescription>
28      </CardHeader>
29      <CardContent>
30        <p>Count: {count}</p>
31        <p>Previous Count: {previousCount}</p>
32      </CardContent>
33      <CardFooter>
34        <Button onClick={() => setCount(count + 1)}>Increment</Button>
35      </CardFooter>
36    </Card>
37  );
38}