UseIdleDemo

1'use client';
2 
3import React from 'react';
4 
5import { Badge } from '@/components/ui/badge';
6import { Button } from '@/components/ui/button';
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from '@/components/ui/card';
14 
15import { cn } from '@/lib/utils';
16 
17import { useIdle } from '@/hooks/guarahooks/use-idle';
18 
19export default function UseIdleDemo() {
20  // 2 seconds of timeout
21  const [idle, resetIdle] = useIdle(2000);
22 
23  return (
24    <Card className="relative max-w-sm w-full">
25      <CardHeader>
26        <CardTitle>useIdle</CardTitle>
27        <CardDescription>
28          This component uses the <code>useIdle</code> hook to detect if the
29          user is idle for a given timeout (2 seconds).
30        </CardDescription>
31      </CardHeader>
32      <CardContent className="space-y-4">
33        <Badge
34          variant="secondary"
35          className={cn(
36            'w-fit',
37            idle
38              ? 'bg-red-500/30 border-red-500'
39              : 'bg-green-500/30 border-green-500',
40          )}
41        >
42          The user is{' '}
43          <p
44            className={cn(
45              'text-foreground font-bold uppercase',
46              idle ? 'text-red-500' : 'text-green-500',
47            )}
48          >
49            {idle ? 'idle' : 'active'}
50          </p>
51        </Badge>
52        <p className="text-sm text-muted-foreground">
53          Interact with the page (keyboard, mouse, scroll, etc) to reset the
54          idle timer.
55        </p>
56        <Button size="sm" onClick={resetIdle}>
57          Or click here
58        </Button>
59      </CardContent>
60    </Card>
61  );
62}