Updated layout

src/components/ThemeProvider.tsx

@@ -0,0 +1,14 @@
+import { ThemeProvider as OriginalThemeProvider } from "next-themes"
+import { ReactNode } from "react"
+
+export default function ThemeProvider({ children }: Readonly<{ children: ReactNode }>) {
+    return (
+        <OriginalThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+        >
+            {children}
+        </OriginalThemeProvider>
+    )
+}

src/components/theme-switcher.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { Monitor, Moon, Sun } from "lucide-react"
+import { motion } from "motion/react"
+import { useTheme } from "next-themes"
+import { useCallback, useEffect, useState } from "react"
+
+const themes = [
+    {
+        key: "light",
+        icon: Sun,
+        label: "Light theme"
+    },
+    {
+        key: "dark",
+        icon: Moon,
+        label: "Dark theme"
+    },
+    {
+        key: "system",
+        icon: Monitor,
+        label: "System theme"
+    }
+]
+
+export type ThemeSwitcherProps = {
+    className?: string
+    vertical?: boolean
+}
+
+export function ThemeSwitcher({ className, vertical = false }: ThemeSwitcherProps) {
+    const { theme, setTheme } = useTheme()
+    const [mounted, setMounted] = useState(false)
+
+    const handleThemeClick = useCallback(
+        (themeKey: "light" | "dark" | "system") => {
+            setTheme(themeKey)
+        },
+        [setTheme]
+    )
+
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) {
+        return null
+    }
+
+    return (
+        <div
+            className={cn(
+                "relative isolate flex p-1 rounded-full bg-background ring-1 ring-border",
+                vertical ? "flex-col h-auto w-8" : "h-8",
+                className
+            )}
+        >
+            {themes.map(({ key, icon: Icon, label }) => {
+                const isActive = theme === key
+
+                return (
+                    <button
+                        aria-label={label}
+                        className="relative w-6 h-6 rounded-full"
+                        key={key}
+                        onClick={() => handleThemeClick(key as "light" | "dark" | "system")}
+                        type="button"
+                    >
+                        {isActive && (
+                            <motion.div
+                                className="absolute inset-0 rounded-full bg-secondary"
+                                layoutId={vertical ? "activeThemeVertical" : "activeTheme"}
+                                transition={{ type: "spring", duration: 0.5 }}
+                            />
+                        )}
+                        <Icon
+                            className={cn(
+                                "relative z-10 m-auto h-4 w-4",
+                                isActive ? "text-foreground" : "text-muted-foreground"
+                            )}
+                        />
+                    </button>
+                )
+            })}
+        </div>
+    )
+}