UseCookieDemo

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 { useCookie } from '@/hooks/guarahooks/use-cookie';
17 
18export default function UseCookieDemo() {
19  // useCookie hook for a demo cookie
20  const [cookieValue, setCookie, removeCookie] = useCookie<string>(
21    'demo-cookie',
22    'hermione',
23  );
24  const [input, setInput] = useState('');
25 
26  // Handle setting the cookie
27  const handleSet = () => {
28    setCookie(input, { path: '/' });
29  };
30 
31  // Handle removing the cookie
32  const handleRemove = () => {
33    removeCookie();
34    setInput('');
35  };
36 
37  return (
38    <Card className="relative max-w-sm w-full">
39      <CardHeader>
40        <CardTitle>useCookie</CardTitle>
41        <CardDescription>
42          This component uses the <code>useCookie</code> hook to manage a
43          cookie.
44        </CardDescription>
45      </CardHeader>
46      <CardContent className="space-y-4">
47        <Input
48          value={input}
49          onChange={(e) => setInput(e.target.value)}
50          placeholder="Enter cookie value"
51        />
52        <pre className="text-sm text-muted-foreground bg-accent w-fit px-1 py-0.5 rounded-xs">
53          {cookieValue}
54        </pre>
55      </CardContent>
56      <CardFooter className="flex gap-2">
57        <Button onClick={handleSet} variant="secondary">
58          Set Cookie
59        </Button>
60        <Button onClick={handleRemove} variant="destructive">
61          Remove Cookie
62        </Button>
63      </CardFooter>
64    </Card>
65    // <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border border-gray-200">
66    //   <h2 className="text-2xl font-bold mb-4 text-gray-800">useCookie Demo</h2>
67    //   <div className="mb-4">
68    //     <label className="block text-gray-700 mb-1">
69    //       Current cookie value:
70    //     </label>
71    //     <div className="p-2 bg-gray-100 rounded text-gray-900 min-h-[2rem]">
72    //       {cookieValue !== undefined ? (
73    //         cookieValue
74    //       ) : (
75    //         <span className="italic text-gray-400">(no value)</span>
76    //       )}
77    //     </div>
78    //   </div>
79    //   <div className="mb-4">
80    //     <label htmlFor="cookie-input" className="block text-gray-700 mb-1">
81    //       Set new value:
82    //     </label>
83    //     <input
84// … truncated