UseOSDemo

1'use client';
2 
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardFooter,
8  CardHeader,
9  CardTitle,
10} from '@/components/ui/card';
11 
12import { OS, useOS } from '@/hooks/guarahooks/use-os';
13 
14export default function UseOSDemo() {
15  const os = useOS();
16 
17  console.log(os);
18 
19  const osLabel: Record<OS, string> = {
20    [OS.Undetermined]: 'Unable to determine the operating system.',
21    [OS.MacOS]: 'MacOS',
22    [OS.IOS]: 'iOS',
23    [OS.Windows]: 'Windows',
24    [OS.Android]: 'Android',
25    [OS.Linux]: 'Linux',
26  };
27 
28  return (
29    <Card className="w-full max-w-md relative">
30      <CardHeader>
31        <CardTitle>useOS</CardTitle>
32        <CardDescription>
33          This hook detects the user's operating system.
34        </CardDescription>
35      </CardHeader>
36      <CardContent className="space-y-4">
37        <p className="text-sm">Operating System detected:</p>
38        <div className="font-bold">{osLabel[os]}</div>
39      </CardContent>
40      <CardFooter className="gap-x-1">
41        <p className="text-sm text-muted-foreground">
42          Value returned from useOS:
43        </p>
44        <p className="text-sm">{os}</p>
45      </CardFooter>
46    </Card>
47  );
48}