{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-gif-demo",
  "type": "registry:component",
  "registryDependencies": [
    "text-gif"
  ],
  "files": [
    {
      "path": "registry/default/example/text-gif-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\nimport { TextGif } from \"../ui/text-gif\"\n\nexport default function TextGifDemo() {\n  const [text, setText] = useState(\"TextGif\")\n  const [size, setSize] = useState(\"xl\")\n  const [weight, setWeight] = useState(\"bold\")\n\n  const gifUrls = [\n    \"https://media.giphy.com/media/3zvbrvbRe7wxBofOBI/giphy.gif\",\n    \"https://media.giphy.com/media/fnglNFjBGiyAFtm6ke/giphy.gif\",\n    \"https://media.giphy.com/media/9Pmfazv34l7aNIKK05/giphy.gif\",\n    \"https://media.giphy.com/media/4bhs1boql4XVJgmm4H/giphy.gif\",\n  ]\n\n  const [selectedGif, setSelectedGif] = useState(gifUrls[0])\n\n  return (\n    <div className=\"mx-auto max-w-3xl space-y-8 rounded-xl bg-neutral-50 p-6 dark:bg-neutral-900\">\n      {/* Preview */}\n      <div className=\"flex items-center justify-center rounded-xl bg-white p-12 dark:bg-black\">\n        <TextGif\n          gifUrl={selectedGif}\n          text={text}\n          size={size as any}\n          weight={weight as any}\n        />\n      </div>\n\n      {/* Controls */}\n      <div className=\"grid gap-6 md:grid-cols-2\">\n        <div className=\"space-y-4\">\n          <label className=\"text-sm font-medium\">Text</label>\n          <Input\n            value={text}\n            onChange={(e) => setText(e.target.value)}\n            placeholder=\"Enter text\"\n          />\n        </div>\n\n        <div className=\"space-y-4\">\n          <label className=\"text-sm font-medium\">GIF Background</label>\n          <Select value={selectedGif} onValueChange={setSelectedGif}>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select GIF\" />\n            </SelectTrigger>\n            <SelectContent>\n              {gifUrls.map((gif, index) => (\n                <SelectItem key={index} value={gif}>\n                  GIF {index + 1}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"space-y-4\">\n          <label className=\"text-sm font-medium\">Text Size</label>\n          <Select value={size} onValueChange={setSize}>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select size\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[\"sm\", \"md\", \"lg\", \"xl\", \"xxl\"].map((s) => (\n                <SelectItem key={s} value={s}>\n                  {s}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"space-y-4\">\n          <label className=\"text-sm font-medium\">Font Weight</label>\n          <Select value={weight} onValueChange={setWeight}>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select weight\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[\"normal\", \"medium\", \"semi\", \"bold\"].map((w) => (\n                <SelectItem key={w} value={w}>\n                  {w}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n\n      {/* Examples */}\n      <div className=\"space-y-4\">\n        <h2 className=\"text-xl font-semibold\">Examples</h2>\n        <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n          <div className=\"flex flex-col items-center justify-center rounded-xl bg-white p-6 dark:bg-black\">\n            <TextGif\n              gifUrl={gifUrls[1]}\n              text=\"Headings\"\n              size=\"xl\"\n              weight=\"bold\"\n            />\n          </div>\n          <div className=\"flex flex-col items-center justify-center rounded-xl bg-white p-6 dark:bg-black\">\n            <TextGif gifUrl={gifUrls[2]} text=\"$49\" size=\"xxl\" weight=\"bold\" />\n            <p className=\"mt-2 text-sm\">per month</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}