UseIsTouchDeviceDemo

1'use client';
2 
3import { Badge } from '@/components/ui/badge';
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardHeader,
9  CardTitle,
10} from '@/components/ui/card';
11 
12import { useIsTouchDevice } from '@/hooks/guarahooks/use-is-touch-device';
13 
14export default function UseIsTouchDeviceDemo() {
15  const { isTouchable } = useIsTouchDevice();
16 
17  return (
18    <Card className="w-full max-w-md relative">
19      <CardHeader>
20        <CardTitle>useIsTouchDevice</CardTitle>
21        <CardDescription>
22          This hook detects if the user's device has touch screen functionality.
23        </CardDescription>
24      </CardHeader>
25      <CardContent className="space-y-4">
26        <div className="flex flex-col space-y-2">
27          <p className="text-sm font-medium">Touch Support Status:</p>
28          <Badge
29            variant={isTouchable ? 'default' : 'secondary'}
30            className="w-fit"
31          >
32            {isTouchable ? 'Touch Device' : 'Non-Touch Device'}
33          </Badge>
34        </div>
35        <div className="text-sm text-muted-foreground">
36          {isTouchable
37            ? 'Your device supports touch input'
38            : 'Your device does not support touch input'}
39        </div>
40      </CardContent>
41    </Card>
42  );
43}