{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bg-animated-gradient-demo",
  "type": "registry:component",
  "registryDependencies": [
    "bg-animated-gradient"
  ],
  "files": [
    {
      "path": "registry/default/example/bg-animated-gradient-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport { Check, Copy, Minus, Plus, Trash2 } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nimport { GradientAnimation } from \"../ui/bg-animated-gradient\"\n\ntype GradientStop = {\n  color: string\n  position: number\n}\n\ntype Gradient = {\n  stops: GradientStop[]\n  centerX: number\n  centerY: number\n}\n\nconst initialConfig = {\n  animationDuration: 5,\n  gradients: [\n    {\n      stops: [\n        { color: \"#3498DB\", position: 0 },\n        { color: \"#2980B9\", position: 25 },\n        { color: \"#1ABC9C\", position: 50 },\n        { color: \"transparent\", position: 75 },\n      ],\n      centerX: 30,\n      centerY: 70,\n    },\n    {\n      stops: [\n        { color: \"#16A085\", position: 0 },\n        { color: \"#2980B9\", position: 25 },\n        { color: \"#3498DB\", position: 50 },\n        { color: \"transparent\", position: 75 },\n      ],\n      centerX: 70,\n      centerY: 30,\n    },\n  ],\n}\n\nexport function ConfigurableGradientAnimation() {\n  const [config, setConfig] = useState(initialConfig)\n  const [isCopied, setIsCopied] = useState(false)\n  const { toast } = useToast()\n\n  const updateConfig = (key: string, value: any) => {\n    setConfig((prev) => ({ ...prev, [key]: value }))\n  }\n\n  const updateGradient = (index: number, updatedGradient: Gradient) => {\n    const newGradients = [...config.gradients]\n    newGradients[index] = updatedGradient\n    updateConfig(\"gradients\", newGradients)\n  }\n\n  const addGradient = () => {\n    const newGradient: Gradient = {\n      stops: [\n        { color: \"#000000\", position: 0 },\n        { color: \"#FFFFFF\", position: 100 },\n      ],\n      centerX: 50,\n      centerY: 50,\n    }\n    updateConfig(\"gradients\", [...config.gradients, newGradient])\n  }\n\n  const removeGradient = (index: number) => {\n    const newGradients = config.gradients.filter((_, i) => i !== index)\n    updateConfig(\"gradients\", newGradients)\n  }\n\n  const copyConfigToClipboard = () => {\n    const configString = `\n\"use client\"\n\nimport { GradientAnimation } from \"./gradient-animation\"\n\nexport function GradientAnimationExample() {\n  return (\n    <div className=\"h-screen w-screen relative\">\n      <GradientAnimation\n        animationDuration={${config.animationDuration}}\n        gradients={${JSON.stringify(config.gradients, null, 2)}}\n      />\n    </div>\n  )\n}\n`\n\n    navigator.clipboard.writeText(configString).then(() => {\n      setIsCopied(true)\n      toast({\n        title: \"Configuration Copied\",\n        description:\n          \"The current configuration has been copied to your clipboard.\",\n      })\n      setTimeout(() => setIsCopied(false), 2000)\n    })\n  }\n\n  return (\n    <div className=\"container mx-auto py-8\">\n      <h1 className=\"mb-6 text-center text-3xl font-bold\">\n        Configurable GradientAnimation\n      </h1>\n      <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-1\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={copyConfigToClipboard}\n          className=\"ml-2\"\n        >\n          {isCopied ? (\n            <Check className=\"mr-2 h-4 w-4\" />\n          ) : (\n            <Copy className=\"mr-2 h-4 w-4\" />\n          )}\n          {isCopied ? \"Copied!\" : \"Copy Config\"}\n        </Button>\n        <div className=\"overflow-hidden rounded-lg bg-white\">\n          <div className=\"relative h-[500px] w-full\">\n            <GradientAnimation {...config} />\n          </div>\n        </div>\n        <Card className=\"from-primary/5 to-primary/5 overflow-hidden bg-gradient-to-b\">\n          <CardHeader>\n            <CardTitle>Configuration</CardTitle>\n          </CardHeader>\n          <CardContent>\n            <Tabs defaultValue=\"general\">\n              <TabsList className=\"grid w-full grid-cols-2\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"gradients\">Gradients</TabsTrigger>\n              </TabsList>\n              <TabsContent value=\"general\">\n                <Accordion type=\"single\" collapsible className=\"w-full\">\n                  <AccordionItem value=\"animation\">\n                    <AccordionTrigger>Animation</AccordionTrigger>\n                    <AccordionContent>\n                      <div className=\"space-y-4\">\n                        <div>\n                          <Label htmlFor=\"animationDuration\">\n                            Animation Duration\n                          </Label>\n                          <Slider\n                            id=\"animationDuration\"\n                            min={1}\n                            max={30}\n                            step={1}\n                            value={[config.animationDuration]}\n                            onValueChange={([value]) =>\n                              updateConfig(\"animationDuration\", value)\n                            }\n                          />\n                        </div>\n                      </div>\n                    </AccordionContent>\n                  </AccordionItem>\n                </Accordion>\n              </TabsContent>\n              <TabsContent value=\"gradients\">\n                <div className=\"space-y-4\">\n                  {config.gradients.map((gradient, index) => (\n                    <Card\n                      key={index}\n                      className=\"from-primary/5 to-primary/10 bg-gradient-to-b\"\n                    >\n                      <CardHeader>\n                        <CardTitle className=\"text-lg\">\n                          Gradient {index + 1}\n                        </CardTitle>\n                      </CardHeader>\n                      <CardContent>\n                        <div className=\"space-y-4\">\n                          <div className=\"grid grid-cols-2 gap-4\">\n                            <div>\n                              <Label htmlFor={`centerX-${index}`}>\n                                Center X\n                              </Label>\n                              <Slider\n                                id={`centerX-${index}`}\n                                min={0}\n                                max={100}\n                                step={1}\n                                value={[gradient.centerX]}\n                                onValueChange={([value]) =>\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    centerX: value,\n                                  })\n                                }\n                              />\n                            </div>\n                            <div>\n                              <Label htmlFor={`centerY-${index}`}>\n                                Center Y\n                              </Label>\n                              <Slider\n                                id={`centerY-${index}`}\n                                min={0}\n                                max={100}\n                                step={1}\n                                value={[gradient.centerY]}\n                                onValueChange={([value]) =>\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    centerY: value,\n                                  })\n                                }\n                              />\n                            </div>\n                          </div>\n                          {gradient.stops.map((stop, stopIndex) => (\n                            <div\n                              key={stopIndex}\n                              className=\"flex items-center space-x-2\"\n                            >\n                              <Input\n                                type=\"color\"\n                                value={stop.color}\n                                onChange={(e) => {\n                                  const newStops = [...gradient.stops]\n                                  newStops[stopIndex] = {\n                                    ...stop,\n                                    color: e.target.value,\n                                  }\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    stops: newStops,\n                                  })\n                                }}\n                                className=\"h-10 w-16\"\n                              />\n                              <Slider\n                                min={0}\n                                max={100}\n                                step={1}\n                                value={[stop.position]}\n                                onValueChange={([value]) => {\n                                  const newStops = [...gradient.stops]\n                                  newStops[stopIndex] = {\n                                    ...stop,\n                                    position: value,\n                                  }\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    stops: newStops,\n                                  })\n                                }}\n                                className=\"flex-grow\"\n                              />\n                              <Button\n                                variant=\"outline\"\n                                size=\"icon\"\n                                onClick={() => {\n                                  const newStops = gradient.stops.filter(\n                                    (_, i) => i !== stopIndex\n                                  )\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    stops: newStops,\n                                  })\n                                }}\n                              >\n                                <Minus className=\"h-4 w-4\" />\n                              </Button>\n                            </div>\n                          ))}\n                          <div className=\"flex justify-between\">\n                            <Button\n                              variant=\"outline\"\n                              onClick={() => {\n                                const newStops = [\n                                  ...gradient.stops,\n                                  { color: \"#000000\", position: 100 },\n                                ]\n                                updateGradient(index, {\n                                  ...gradient,\n                                  stops: newStops,\n                                })\n                              }}\n                            >\n                              <Plus className=\"mr-2 h-4 w-4\" />\n                              Add Stop\n                            </Button>\n                            <Button\n                              variant=\"destructive\"\n                              onClick={() => removeGradient(index)}\n                            >\n                              <Trash2 className=\"mr-2 h-4 w-4\" />\n                              Remove Gradient\n                            </Button>\n                          </div>\n                        </div>\n                      </CardContent>\n                    </Card>\n                  ))}\n                  <Button onClick={addGradient} className=\"w-full\">\n                    <Plus className=\"mr-2 h-4 w-4\" />\n                    Add Gradient\n                  </Button>\n                </div>\n              </TabsContent>\n            </Tabs>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n\nexport default ConfigurableGradientAnimation\n",
      "type": "registry:component"
    }
  ]
}