UseLocalStorageDemo

1'use client';
2 
3import React from 'react';
4 
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardFooter,
10  CardHeader,
11  CardTitle,
12} from '@/components/ui/card';
13import { Input } from '@/components/ui/input';
14import { Label } from '@/components/ui/label';
15 
16import { useLocalStorage } from '@/hooks/guarahooks/use-local-storage';
17 
18export default function UseLocalStorageDemo() {
19  // Example with a string
20  const [name, setName] = useLocalStorage<string>('demo-name', '');
21 
22  return (
23    <Card className="relative max-w-sm w-full">
24      <CardHeader>
25        <CardTitle>useLocalStorage</CardTitle>
26        <CardDescription>
27          This component uses the <code>useLocalStorage</code> hook to manage a
28          local storage item.
29        </CardDescription>
30      </CardHeader>
31      <CardContent className="space-y-6">
32        <div className="flex flex-col gap-2">
33          <Label htmlFor="name">Name</Label>
34          <Input
35            id="name"
36            value={name}
37            onChange={(e) => setName(e.target.value)}
38            placeholder="Enter your name"
39          />
40        </div>
41        <div className="flex items-end gap-2">
42          <p>Name:</p>
43          <pre className="text-sm text-muted-foreground bg-accent w-fit px-1 py-0.5 rounded-xs">
44            {name}
45          </pre>
46        </div>
47      </CardContent>
48      <CardFooter>
49        <p className="text-muted-foreground text-sm">
50          Looks in the local storage for the key <code>demo-name</code>.
51        </p>
52      </CardFooter>
53    </Card>
54  );
55}