bg-animated-gradient-demo

1"use client"
2 
3import React, { useState } from "react"
4import { Check, Copy, Minus, Plus, Trash2 } from "lucide-react"
5 
6import {
7  Accordion,
8  AccordionContent,
9  AccordionItem,
10  AccordionTrigger,
11} from "@/components/ui/accordion"
12import { Button } from "@/components/ui/button"
13import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
14import { Input } from "@/components/ui/input"
15import { Label } from "@/components/ui/label"
16import { Slider } from "@/components/ui/slider"
17import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
18import { useToast } from "@/components/ui/use-toast"
19 
20import { GradientAnimation } from "../ui/bg-animated-gradient"
21 
22type GradientStop = {
23  color: string
24  position: number
25}
26 
27type Gradient = {
28  stops: GradientStop[]
29  centerX: number
30  centerY: number
31}
32 
33const initialConfig = {
34  animationDuration: 5,
35  gradients: [
36    {
37      stops: [
38        { color: "#3498DB", position: 0 },
39        { color: "#2980B9", position: 25 },
40        { color: "#1ABC9C", position: 50 },
41        { color: "transparent", position: 75 },
42      ],
43      centerX: 30,
44      centerY: 70,
45    },
46    {
47      stops: [
48        { color: "#16A085", position: 0 },
49        { color: "#2980B9", position: 25 },
50        { color: "#3498DB", position: 50 },
51        { color: "transparent", position: 75 },
52      ],
53      centerX: 70,
54      centerY: 30,
55    },
56  ],
57}
58 
59export function ConfigurableGradientAnimation() {
60  const [config, setConfig] = useState(initialConfig)
61  const [isCopied, setIsCopied] = useState(false)
62  const { toast } = useToast()
63 
64  const updateConfig = (key: string, value: any) => {
65    setConfig((prev) => ({ ...prev, [key]: value }))
66  }
67 
68  const updateGradient = (index: number, updatedGradient: Gradient) => {
69    const newGradients = [...config.gradients]
70    newGradients[index] = updatedGradient
71    updateConfig("gradients", newGradients)
72  }
73 
74  const addGradient = () => {
75    const newGradient: Gradient = {
76      stops: [
77        { color: "#000000", position: 0 },
78        { color: "#FFFFFF", position: 100 },
79      ],
80      centerX: 50,
81      centerY: 50,
82    }
83    updateConfig("gradients", [...config.gradients, newGradient])
84  }
85 
86  const removeGradient = (index: number) => {
87    const newGradients = config.gradients.filter((_, i) => i !== index)
88    updateConfig("gradients", newGradients)
89  }
90 
91  const copyConfigToClipboard = () => {
92    const configString = `
93"use client"
94 
95// … truncated