{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-cookie-demo",
  "title": "UseCookieDemo",
  "description": "use-cookie's hook in action.",
  "registryDependencies": [
    "card",
    "input",
    "button",
    "https://guarahooks.com/r/use-cookie.json"
  ],
  "files": [
    {
      "path": "registry/example/use-cookie-demo.tsx",
      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\n\nimport { useCookie } from '@/hooks/guarahooks/use-cookie';\n\nexport default function UseCookieDemo() {\n  // useCookie hook for a demo cookie\n  const [cookieValue, setCookie, removeCookie] = useCookie<string>(\n    'demo-cookie',\n    'hermione',\n  );\n  const [input, setInput] = useState('');\n\n  // Handle setting the cookie\n  const handleSet = () => {\n    setCookie(input, { path: '/' });\n  };\n\n  // Handle removing the cookie\n  const handleRemove = () => {\n    removeCookie();\n    setInput('');\n  };\n\n  return (\n    <Card className=\"relative max-w-sm w-full\">\n      <CardHeader>\n        <CardTitle>useCookie</CardTitle>\n        <CardDescription>\n          This component uses the <code>useCookie</code> hook to manage a\n          cookie.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <Input\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          placeholder=\"Enter cookie value\"\n        />\n        <pre className=\"text-sm text-muted-foreground bg-accent w-fit px-1 py-0.5 rounded-xs\">\n          {cookieValue}\n        </pre>\n      </CardContent>\n      <CardFooter className=\"flex gap-2\">\n        <Button onClick={handleSet} variant=\"secondary\">\n          Set Cookie\n        </Button>\n        <Button onClick={handleRemove} variant=\"destructive\">\n          Remove Cookie\n        </Button>\n      </CardFooter>\n    </Card>\n    // <div className=\"max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border border-gray-200\">\n    //   <h2 className=\"text-2xl font-bold mb-4 text-gray-800\">useCookie Demo</h2>\n    //   <div className=\"mb-4\">\n    //     <label className=\"block text-gray-700 mb-1\">\n    //       Current cookie value:\n    //     </label>\n    //     <div className=\"p-2 bg-gray-100 rounded text-gray-900 min-h-[2rem]\">\n    //       {cookieValue !== undefined ? (\n    //         cookieValue\n    //       ) : (\n    //         <span className=\"italic text-gray-400\">(no value)</span>\n    //       )}\n    //     </div>\n    //   </div>\n    //   <div className=\"mb-4\">\n    //     <label htmlFor=\"cookie-input\" className=\"block text-gray-700 mb-1\">\n    //       Set new value:\n    //     </label>\n    //     <input\n    //       id=\"cookie-input\"\n    //       type=\"text\"\n    //       value={input}\n    //       onChange={(e) => setInput(e.target.value)}\n    //       className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400\"\n    //       placeholder=\"Enter cookie value\"\n    //     />\n    //   </div>\n    //   <div className=\"flex gap-2\">\n    //     <button\n    //       onClick={handleSet}\n    //       className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition\"\n    //     >\n    //       Set Cookie\n    //     </button>\n    //     <button\n    //       onClick={handleRemove}\n    //       className=\"px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition\"\n    //     >\n    //       Remove Cookie\n    //     </button>\n    //   </div>\n    // </div>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-cookie-demo.tsx"
    }
  ],
  "type": "registry:example"
}