"use client"; import { motion } from "framer-motion"; import clsx from "clsx"; import { useState } from "react"; interface BackgroundCirclesProps { title?: string; description?: string; className?: string; variant?: keyof typeof COLOR_VARIANTS; } const COLOR_VARIANTS = { primary: { border: [ "border-emerald-500/60", "border-cyan-400/50", "border-slate-600/30", ], gradient: "from-emerald-500/30", }, secondary: { border: [ "border-violet-500/60", "border-fuchsia-400/50", "border-slate-600/30", ], gradient: "from-violet-500/30", }, tertiary: { border: [ "border-orange-500/60", "border-yellow-400/50", "border-slate-600/30", ], gradient: "from-orange-500/30", }, quaternary: { border: [ "border-purple-500/60", "border-pink-400/50", "border-slate-600/30", ], gradient: "from-purple-500/30", }, quinary: { border: [ "border-red-500/60", "border-rose-400/50", "border-slate-600/30", ], gradient: "from-red-500/30", }, // red senary: { border: [ "border-blue-500/60", "border-sky-400/50", "border-slate-600/30", ], gradient: "from-blue-500/30", }, // blue septenary: { border: [ "border-gray-500/60", "border-gray-400/50", "border-slate-600/30", ], gradient: "from-gray-500/30", }, octonary: { border: [ "border-red-500/60", "border-rose-400/50", "border-slate-600/30", ], gradient: "from-red-500/30", }, } as const; const AnimatedGrid = () => (

); export function BackgroundCircles({ title = "Background Circles", description = "Optional Description", className, variant = "octonary", }: BackgroundCirclesProps) { const variantStyles = COLOR_VARIANTS[variant]; const variants = Object.keys( COLOR_VARIANTS ) as (keyof typeof COLOR_VARIANTS)[]; return (

{[0, 1, 2].map((i) => (

))}

{title}

{description} · Kokonut UI

); } export function DemoCircles() { const [currentVariant, setCurrentVariant] = useState("octonary"); const variants = Object.keys( COLOR_VARIANTS ) as (keyof typeof COLOR_VARIANTS)[]; function getNextVariant() { const currentIndex = variants.indexOf(currentVariant); const nextVariant = variants[(currentIndex + 1) % variants.length]; return nextVariant; } return ( <>

); }