refactor: Remove unused imports and unnecessary console logs

src/components/mode-toggle.tsx

@@ -1,33 +1,30 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons";
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import { Button } from "./ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
 
 export function ModeToggle() {
-  const [mounted, setMounted] = useState(false);
 	const { theme, setTheme } = useTheme();
+
 	const toggleTheme = () => {
 		switch (theme) {
-      case 'system':
+			case "system":
 				setTheme("dark");
 				break;
-      case 'dark':
+			case "dark":
 				setTheme("light");
 				break;
-      case 'light':
+			case "light":
-        setTheme('system');
+				setTheme("system");
 				break;
 		}
 	};
 
+	// prevent hydration error
+	const [mounted, setMounted] = useState(false);
+
 	useEffect(() => {
 		setMounted(true);
 	}, []);
@@ -36,12 +33,17 @@ export function ModeToggle() {
 		return null;
 	}
 
-  console.log(theme);
 	return (
 		<Button variant="ghost" size="icon" onClick={toggleTheme}>
-      <MoonIcon className={`${ (theme === 'system') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
+			<MoonIcon
-      <SunIcon className={`${ (theme === 'light') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
+				className={`${theme === "system" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
-      <MoonIcon className={`${ (theme === 'dark') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
+			/>
+			<SunIcon
+				className={`${theme === "light" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
+			/>
+			<MoonIcon
+				className={`${theme === "dark" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
+			/>
 			<span className="sr-only">Toggle theme</span>
 		</Button>
 	);