{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bg-animated-fractal-dot-grid-demo",
  "type": "registry:component",
  "registryDependencies": [
    "bg-animated-fractal-dot-grid"
  ],
  "files": [
    {
      "path": "registry/default/example/bg-animated-fractal-dot-grid-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport { Check, Copy } 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 {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nimport { FractalDotGrid } from \"../ui/bg-animated-fractal-dot-grid\"\n\nconst initialConfig = {\n  dotSize: 5.5,\n  dotSpacing: 13,\n  dotOpacity: 0.7,\n  waveIntensity: 99,\n  waveRadius: 200,\n  dotColor: \"rgba(100, 100, 255, 1)\",\n  glowColor: \"rgba(100, 100, 255, 1)\",\n  enableNoise: false,\n  noiseOpacity: 0.03,\n  enableMouseGlow: false,\n  initialPerformance: \"medium\" as const,\n}\n\nexport function ConfigurableFractalDotGridDemo() {\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 copyConfigToClipboard = () => {\n    const configString = `\n\"use client\"\n\nimport { FractalDotGrid } from \"./fractal-dot-grid\"\n\nexport function FractalDotGridExample() {\n  return (\n    <div className=\"h-screen w-screen relative\">\n      <FractalDotGrid\n        dotSize={${config.dotSize}}\n        dotSpacing={${config.dotSpacing}}\n        dotOpacity={${config.dotOpacity}}\n        waveIntensity={${config.waveIntensity}}\n        waveRadius={${config.waveRadius}}\n        dotColor=\"${config.dotColor}\"\n        glowColor=\"${config.glowColor}\"\n        enableNoise={${config.enableNoise}}\n        noiseOpacity={${config.noiseOpacity}}\n        enableMouseGlow={${config.enableMouseGlow}}\n        initialPerformance=\"${config.initialPerformance}\"\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      <div className=\"grid grid-cols-1 gap-8\">\n        <div>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={copyConfigToClipboard}\n            className=\"mb-4\"\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              <FractalDotGrid {...config} />\n            </div>\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            <Accordion type=\"single\" collapsible className=\"w-full\">\n              <AccordionItem value=\"dots\">\n                <AccordionTrigger>Dots</AccordionTrigger>\n                <AccordionContent>\n                  <div className=\"space-y-4\">\n                    <div>\n                      <Label htmlFor=\"dotSize\">Dot Size</Label>\n                      <Slider\n                        id=\"dotSize\"\n                        min={1}\n                        max={10}\n                        step={0.5}\n                        value={[config.dotSize]}\n                        onValueChange={([value]) =>\n                          updateConfig(\"dotSize\", value)\n                        }\n                      />\n                    </div>\n                    <div>\n                      <Label htmlFor=\"dotSpacing\">Dot Spacing</Label>\n                      <Slider\n                        id=\"dotSpacing\"\n                        min={10}\n                        max={50}\n                        step={1}\n                        value={[config.dotSpacing]}\n                        onValueChange={([value]) =>\n                          updateConfig(\"dotSpacing\", value)\n                        }\n                      />\n                    </div>\n                    <div>\n                      <Label htmlFor=\"dotOpacity\">Dot Opacity</Label>\n                      <Slider\n                        id=\"dotOpacity\"\n                        min={0}\n                        max={1}\n                        step={0.1}\n                        value={[config.dotOpacity]}\n                        onValueChange={([value]) =>\n                          updateConfig(\"dotOpacity\", value)\n                        }\n                      />\n                    </div>\n                    <div>\n                      <Label htmlFor=\"dotColor\">Dot Color</Label>\n                      <Input\n                        id=\"dotColor\"\n                        type=\"color\"\n                        value={config.dotColor}\n                        onChange={(e) =>\n                          updateConfig(\"dotColor\", e.target.value)\n                        }\n                        className=\"h-10 px-3 py-2\"\n                      />\n                    </div>\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n              <AccordionItem value=\"waves\">\n                <AccordionTrigger>Waves</AccordionTrigger>\n                <AccordionContent>\n                  <div className=\"space-y-4\">\n                    <div>\n                      <Label htmlFor=\"waveIntensity\">Wave Intensity</Label>\n                      <Slider\n                        id=\"waveIntensity\"\n                        min={0}\n                        max={100}\n                        step={1}\n                        value={[config.waveIntensity]}\n                        onValueChange={([value]) =>\n                          updateConfig(\"waveIntensity\", value)\n                        }\n                      />\n                    </div>\n                    <div>\n                      <Label htmlFor=\"waveRadius\">Wave Radius</Label>\n                      <Slider\n                        id=\"waveRadius\"\n                        min={50}\n                        max={500}\n                        step={10}\n                        value={[config.waveRadius]}\n                        onValueChange={([value]) =>\n                          updateConfig(\"waveRadius\", value)\n                        }\n                      />\n                    </div>\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n              <AccordionItem value=\"effects\">\n                <AccordionTrigger>Effects</AccordionTrigger>\n                <AccordionContent>\n                  <div className=\"space-y-4\">\n                    <div>\n                      <Label htmlFor=\"glowColor\">Glow Color</Label>\n                      <Input\n                        id=\"glowColor\"\n                        type=\"color\"\n                        value={config.glowColor}\n                        onChange={(e) =>\n                          updateConfig(\"glowColor\", e.target.value)\n                        }\n                        className=\"h-10 px-3 py-2\"\n                      />\n                    </div>\n                    <div className=\"flex items-center space-x-2\">\n                      <Switch\n                        id=\"enableNoise\"\n                        checked={config.enableNoise}\n                        onCheckedChange={(checked) =>\n                          updateConfig(\"enableNoise\", checked)\n                        }\n                      />\n                      <Label htmlFor=\"enableNoise\">Enable Noise</Label>\n                    </div>\n                    {config.enableNoise && (\n                      <div>\n                        <Label htmlFor=\"noiseOpacity\">Noise Opacity</Label>\n                        <Slider\n                          id=\"noiseOpacity\"\n                          min={0}\n                          max={0.1}\n                          step={0.01}\n                          value={[config.noiseOpacity]}\n                          onValueChange={([value]) =>\n                            updateConfig(\"noiseOpacity\", value)\n                          }\n                        />\n                      </div>\n                    )}\n                    <div className=\"flex items-center space-x-2\">\n                      <Switch\n                        id=\"enableMouseGlow\"\n                        checked={config.enableMouseGlow}\n                        onCheckedChange={(checked) =>\n                          updateConfig(\"enableMouseGlow\", checked)\n                        }\n                      />\n                      <Label htmlFor=\"enableMouseGlow\">Enable Mouse Glow</Label>\n                    </div>\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n              <AccordionItem value=\"performance\">\n                <AccordionTrigger>Performance</AccordionTrigger>\n                <AccordionContent>\n                  <div>\n                    <Label htmlFor=\"initialPerformance\">\n                      Initial Performance\n                    </Label>\n                    <Select\n                      value={config.initialPerformance}\n                      onValueChange={(value) =>\n                        updateConfig(\n                          \"initialPerformance\",\n                          value as \"low\" | \"medium\" | \"high\"\n                        )\n                      }\n                    >\n                      <SelectTrigger id=\"initialPerformance\">\n                        <SelectValue />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"low\">Low</SelectItem>\n                        <SelectItem value=\"medium\">Medium</SelectItem>\n                        <SelectItem value=\"high\">High</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n            </Accordion>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n\nexport default ConfigurableFractalDotGridDemo\n",
      "type": "registry:component"
    }
  ]
}