UseSetDemo

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 { useSet } from '@/hooks/guarahooks/use-set';
17 
18export default function UseSetDemo() {
19  const {
20    getAll,
21    add,
22    delete: remove,
23    has,
24    clear,
25    reset,
26  } = useSet<string>(['apple', 'banana']);
27 
28  const [input, setInput] = useState('');
29 
30  return (
31    <Card className="relative max-w-md w-full">
32      <CardHeader>
33        <CardTitle>useSet</CardTitle>
34        <CardDescription>
35          This component uses the <code>useSet</code> hook to manage a set of
36          values.
37        </CardDescription>
38      </CardHeader>
39      <CardContent className="space-y-4">
40        <Input
41          value={input}
42          onChange={(e) => setInput(e.target.value)}
43          placeholder="Add fruit"
44        />
45        <div className="flex items-center gap-2">
46          <Button onClick={() => add(input)}>Add</Button>
47          <Button onClick={() => remove(input)} variant="destructive">
48            Remove
49          </Button>
50          <Button onClick={clear} variant="secondary">
51            Clear
52          </Button>
53          <Button onClick={reset} variant="secondary">
54            Reset
55          </Button>
56        </div>
57        <p>Fruits in the Set:</p>
58        <ul className="list-disc list-inside mt-2">
59          {[...getAll()].map((fruit: string) => (
60            <li key={fruit}>{fruit}</li>
61          ))}
62        </ul>
63      </CardContent>
64      <CardFooter>
65        <p className="text-muted-foreground text-sm">
66          Set (doesn't modify the state): {JSON.stringify(Array.from(getAll()))}
67        </p>
68      </CardFooter>
69    </Card>
70  );
71}