better theme switcher

Took 42 minutes

src/components/sidebar/sidebar.tsx

@@ -41,7 +41,7 @@ const SidebarContent = (): ReactElement => {
             </div>
 
             {/* Theme Switcher */}
-            <div className="flex flex-col">
+            <div className="flex flex-col items-center">
                 <Separator className="mb-3 bg-separator-gradient" />
                 <ThemeSwitcher />
             </div>

src/components/theme-switcher.tsx

@@ -1,12 +1,17 @@
 "use client";
 
 import { ReactElement, useEffect, useState } from "react";
-import { MoonStar, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Button } from "@/components/ui/button";
-import { motion } from "framer-motion";
 import { UseThemeProps } from "next-themes/dist/types";
-import { capitalizeWords } from "@/lib/string";
+import { Monitor, MoonStar, Sun } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const themes = {
+    dark: <MoonStar className="w-4 h-4" />,
+    light: <Sun className="w-4 h-4" />,
+    system: <Monitor className="w-4 h-4" />,
+};
 
 /**
  * The theme switcher component.
@@ -15,47 +20,32 @@ import { capitalizeWords } from "@/lib/string";
  */
 const ThemeSwitcher = (): ReactElement => {
     const [mounted, setMounted] = useState(false);
-    const { theme, setTheme }: UseThemeProps = useTheme();
-    const isLight = theme === "light";
+    const { theme: activeTheme, setTheme }: UseThemeProps = useTheme();
 
     useEffect(() => {
         setMounted(true);
     }, []);
 
-    return mounted ? (
-        <Button
-            className="p-1.5 flex gap-7 justify-start items-center hover:opacity-85 select-none"
-            variant="ghost"
-            onClick={() => setTheme(isLight ? "dark" : "light")}
-        >
-            <div className="relative flex items-center">
-                <motion.div
-                    className="absolute"
-                    initial={{ rotate: 0, scale: 1 }}
-                    animate={{
-                        rotate: isLight ? 0 : -90,
-                        scale: isLight ? 1 : 0,
-                    }}
-                    transition={{ duration: 0.5 }}
-                >
-                    <Sun className="w-[1.1rem] h-[1.1rem]" />
-                </motion.div>
-                <motion.div
-                    className="absolute"
-                    initial={{ rotate: 90, scale: 0 }}
-                    animate={{
-                        rotate: isLight ? 90 : 0,
-                        scale: isLight ? 0 : 1,
-                    }}
-                    transition={{ duration: 0.5 }}
-                >
-                    <MoonStar className="w-[1.1rem] h-[1.1rem]" />
-                </motion.div>
-            </div>
-            <span>{capitalizeWords(theme)}</span>
-        </Button>
-    ) : (
-        <></>
+    return (
+        <div className="w-fit p-1 flex gap-1.5 bg-black/30 ring-1 ring-white/5 rounded-full">
+            {Object.entries(themes).map(([theme, icon]) => {
+                const active: boolean = mounted && theme === activeTheme;
+                return (
+                    <Button
+                        key={theme}
+                        className={cn(
+                            "p-1 h-6 opacity-80 rounded-full",
+                            active &&
+                                "ring-1 bg-zinc-900 ring-white/15 opacity-100"
+                        )}
+                        variant="ghost"
+                        onClick={() => setTheme(theme)}
+                    >
+                        {icon}
+                    </Button>
+                );
+            })}
+        </div>
     );
 };