From 84d6dd71bea3578bef2e22ef67bef87a1e19d374 Mon Sep 17 00:00:00 2001
From: Waled Khatiz <ktz-dev@waleds-air.lan>
Date: Tue, 10 Sep 2024 15:13:06 +1000
Subject: [PATCH] refactor: Remove unused imports and unnecessary console logs

---
 src/components/mode-toggle.tsx | 78 +++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index c320e67..f4ac64f 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -1,48 +1,50 @@
 "use client";
 
-import {useEffect, useState} from "react";
-import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons";
+import { useEffect, useState } from "react";
+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':
-        setTheme("dark");
-        break;
-      case 'dark':
-        setTheme("light");
-        break;
-      case 'light':
-        setTheme('system');
-        break;
-    }
-  };
+	const { theme, setTheme } = useTheme();
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+	const toggleTheme = () => {
+		switch (theme) {
+			case "system":
+				setTheme("dark");
+				break;
+			case "dark":
+				setTheme("light");
+				break;
+			case "light":
+				setTheme("system");
+				break;
+		}
+	};
 
-  if (!mounted) {
-    return null; 
-  }
+	// prevent hydration error
+	const [mounted, setMounted] = useState(false);
 
-  console.log(theme);
-  return (
-    <Button variant="ghost" size="icon" onClick={toggleTheme}>
-      <MoonIcon className={`${ (theme === 'system') ? '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>
-  );
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (!mounted) {
+		return null;
+	}
+
+	return (
+		<Button variant="ghost" size="icon" onClick={toggleTheme}>
+			<MoonIcon
+				className={`${theme === "system" ? "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>
+	);
 }