UseMapDemo

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';
14import { Input } from '@/components/ui/input';
15 
16import { useMap } from '@/hooks/guarahooks/use-map';
17 
18export default function UseMapDemo() {
19  const {
20    getAll,
21    set: setEntry,
22    delete: deleteEntry,
23    has,
24    clear,
25    reset,
26    get,
27  } = useMap<string, string>([['key1', 'value1']]);
28 
29  const [keyInput, setKeyInput] = useState('');
30  const [valueInput, setValueInput] = useState('');
31 
32  return (
33    <Card className="relative max-w-md w-full">
34      <CardHeader>
35        <CardTitle>useMap</CardTitle>
36        <CardDescription>
37          This component uses the <code>useMap</code> hook to manage a map of
38          key/value pairs.
39        </CardDescription>
40      </CardHeader>
41      <CardContent className="space-y-4">
42        <div className="flex gap-2">
43          <Input
44            value={keyInput}
45            onChange={(e) => setKeyInput(e.target.value)}
46            placeholder="Key"
47          />
48          <Input
49            value={valueInput}
50            onChange={(e) => setValueInput(e.target.value)}
51            placeholder="Value"
52          />
53        </div>
54        <div className="flex items-center gap-2">
55          <Button onClick={() => setEntry(keyInput, valueInput)}>Set</Button>
56          <Button onClick={() => deleteEntry(keyInput)} variant="destructive">
57            Delete
58          </Button>
59          <Button onClick={clear} variant="secondary">
60            Clear
61          </Button>
62          <Button onClick={reset} variant="secondary">
63            Reset
64          </Button>
65        </div>
66        <p>Entries in the Map:</p>
67        <ul className="list-disc list-inside mt-2">
68          {getAll().map(([k, v]) => (
69            <li key={k}>
70              {k}: {v}
71            </li>
72          ))}
73        </ul>
74      </CardContent>
75      <CardFooter>
76        <p className="text-muted-foreground text-sm">
77          Map (doesn't modify the state): {JSON.stringify(getAll())}
78        </p>
79      </CardFooter>
80    </Card>
81  );
82}