[V0_FILE]typescriptreact:file="components/kokonutui/background-circles.tsx" "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 ( <>

) }

About

Tags

Share

More from kokonut

More Templates Like This

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This