{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-map-demo",
  "title": "UseMapDemo",
  "description": "use-map's hook in action.",
  "registryDependencies": [
    "card",
    "button",
    "input",
    "https://guarahooks.com/r/use-map.json"
  ],
  "files": [
    {
      "path": "registry/example/use-map-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 { useMap } from '@/hooks/guarahooks/use-map';\n\nexport default function UseMapDemo() {\n  const {\n    getAll,\n    set: setEntry,\n    delete: deleteEntry,\n    has,\n    clear,\n    reset,\n    get,\n  } = useMap<string, string>([['key1', 'value1']]);\n\n  const [keyInput, setKeyInput] = useState('');\n  const [valueInput, setValueInput] = useState('');\n\n  return (\n    <Card className=\"relative max-w-md w-full\">\n      <CardHeader>\n        <CardTitle>useMap</CardTitle>\n        <CardDescription>\n          This component uses the <code>useMap</code> hook to manage a map of\n          key/value pairs.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <div className=\"flex gap-2\">\n          <Input\n            value={keyInput}\n            onChange={(e) => setKeyInput(e.target.value)}\n            placeholder=\"Key\"\n          />\n          <Input\n            value={valueInput}\n            onChange={(e) => setValueInput(e.target.value)}\n            placeholder=\"Value\"\n          />\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button onClick={() => setEntry(keyInput, valueInput)}>Set</Button>\n          <Button onClick={() => deleteEntry(keyInput)} variant=\"destructive\">\n            Delete\n          </Button>\n          <Button onClick={clear} variant=\"secondary\">\n            Clear\n          </Button>\n          <Button onClick={reset} variant=\"secondary\">\n            Reset\n          </Button>\n        </div>\n        <p>Entries in the Map:</p>\n        <ul className=\"list-disc list-inside mt-2\">\n          {getAll().map(([k, v]) => (\n            <li key={k}>\n              {k}: {v}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <p className=\"text-muted-foreground text-sm\">\n          Map (doesn't modify the state): {JSON.stringify(getAll())}\n        </p>\n      </CardFooter>\n    </Card>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-map-demo.tsx"
    }
  ],
  "type": "registry:example"
}