Theme Switcher

1"use client"
2 
3import type { JSX } from "react"
4import { useSyncExternalStore } from "react"
5import { motion } from "motion/react"
6import { useTheme } from "next-themes"
7 
8import { IconPlaceholder } from "@/registry/icons/icon-placeholder"
9 
10function ThemeOption({
11  icon,
12  value,
13  isActive,
14  onClick,
15}: {
16  icon: JSX.Element
17  value: string
18  isActive?: boolean
19  onClick: (value: string) => void
20}) {
21  return (
22    <button
23      data-active={isActive}
24      className="relative flex size-8 items-center justify-center rounded-full text-muted-foreground transition-[color] hover:text-foreground data-[active=true]:text-foreground [&_svg]:size-4"
25      role="radio"
26      aria-checked={isActive}
27      aria-label={`Switch to ${value} theme`}
28      onClick={() => onClick(value)}
29    >
30      {icon}
31 
32      {isActive && (
33        <motion.span
34          layoutId="theme-option"
35          transition={{ type: "spring", bounce: 0.3, duration: 0.6 }}
36          className="absolute inset-0 rounded-full border"
37        />
38      )}
39    </button>
40  )
41}
42 
43const THEME_OPTIONS = [
44  {
45    icon: (
46      <IconPlaceholder
47        lucide="MonitorIcon"
48        tabler="IconDeviceDesktop"
49        hugeicons="ComputerIcon"
50        phosphor="DesktopIcon"
51        remixicon="RiComputerLine"
52      />
53    ),
54    value: "system",
55  },
56  {
57    icon: (
58      <IconPlaceholder
59        lucide="SunIcon"
60        tabler="IconSun"
61        hugeicons="Sun03Icon"
62        phosphor="SunIcon"
63        remixicon="RiSunLine"
64      />
65    ),
66    value: "light",
67  },
68  {
69    icon: (
70      <IconPlaceholder
71        lucide="MoonIcon"
72        tabler="IconMoon"
73        hugeicons="Moon02Icon"
74        phosphor="MoonIcon"
75        remixicon="RiMoonLine"
76      />
77    ),
78    value: "dark",
79  },
80]
81 
82function ThemeSwitcher() {
83  const { theme, setTheme } = useTheme()
84 
85  const isMounted = useSyncExternalStore(
86    () => () => {},
87    () => true,
88    () => false
89  )
90 
91  if (!isMounted) {
92    return <div className="flex h-8 w-24" />
93  }
94 
95  return (
96    <motion.div
97      key={String(isMounted)}
98      initial={{ opacity: 0 }}
99      animate={{ opacity: 1 }}
100      transition={{ duration: 0.3 }}
101      className="inline-flex items-center overflow-clip rounded-full bg-background inset-ring-1 inset-ring-border"
102      role="radiogroup"
103    >
104      {THEME_OPTIONS.map((option) => (
105        <ThemeOption
106          key={option.value}
107          icon={option.icon}
108          value={option.value}
109          isActive={theme === option.value}
110// … truncated