Spectrum Switcher

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useState } from "react";
5import { GiFairyWand } from "react-icons/gi";
6import { MdKeyboardArrowDown } from "react-icons/md";
7import { motion, AnimatePresence, type Variants } from "motion/react";
8 
9type Spectrum = {
10  id: string;
11  name: string;
12  description: string;
13  color: string;
14  darkColor: string;
15  layoutId: string;
16};
17 
18type SpectrumSwitcherProps = {
19  spectrums?: Spectrum[];
20};
21 
22const defaultSpectrums: Spectrum[] = [
23  {
24    id: "sunset",
25    name: "Sunset Glow",
26    description: "Warm and bold ambience",
27    color: "bg-gradient-to-br from-rose-400 via-orange-300 to-yellow-200",
28    darkColor: "dark:from-rose-600 dark:via-orange-500 dark:to-yellow-400",
29    layoutId: "spectrum-sunset",
30  },
31  {
32    id: "lavender",
33    name: "Lavender Mist",
34    description: "Soft and dreamy palette",
35    color: "bg-gradient-to-br from-purple-400 via-pink-300 to-fuchsia-300",
36    darkColor: "dark:from-purple-500 dark:via-pink-400 dark:to-fuchsia-400",
37    layoutId: "spectrum-lavender",
38  },
39];
40 
41const SpectrumSwitcher = ({
42  spectrums = defaultSpectrums,
43}: SpectrumSwitcherProps) => {
44  const [isOpen, setIsOpen] = useState(false);
45  const [selectedSpectrum, setSelectedSpectrum] = useState(spectrums[0]);
46 
47  const itemVariant: Variants = {
48    open: {
49      opacity: 1,
50      y: 0,
51      filter: "blur(0px)",
52      transition: {
53        duration: 0.4,
54        ease: "easeInOut",
55      },
56    },
57    close: {
58      opacity: 0,
59      y: -5,
60      filter: "blur(5px)",
61      transition: {
62        duration: 0.1,
63        ease: "easeInOut",
64      },
65    },
66  };
67 
68  const dividerVariant: Variants = {
69    open: {
70      opacity: 1,
71      scaleX: 1,
72      transition: {
73        duration: 0.3,
74        ease: "easeInOut",
75      },
76    },
77    close: {
78      opacity: 0,
79      scaleX: 0,
80      transition: {
81        duration: 0.2,
82        ease: "easeInOut",
83      },
84    },
85  };
86 
87  return (
88    <div
89      className={cn(
90        "mx-auto w-full max-w-105 rounded-lg p-1.5",
91        "border border-neutral-200/70 dark:border-neutral-900/70",
92      )}
93    >
94      <div
95        className={cn(
96          "ring-1 ring-black/10 dark:ring-neutral-800/60",
97          "overflow-hidden rounded-[8px] shadow-sm shadow-black/10",
98          "bg-linear-to-r from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-950",
99        )}
100      >
101        <motion.div
102          className={cn("flex min-h-16.75 items-center justify-between px-4")}
103// … truncated