Theme Toggle Button

src/components/theme-toggle.tsx

@@ -1,40 +1,20 @@
 "use client"
 
-import * as React from "react"
+import { Button } from "@/components/ui/button"
-import { Moon, Sun } from "lucide-react"
+import { Sun, Moon } from "lucide-react";
 import { useTheme } from "next-themes"
 
-import { Button } from "@/components/ui/button"
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
 export function ModeToggle() {
-	const { setTheme } = useTheme()
+    const { setTheme, theme } = useTheme();
 
-	return (
+    const toggleTheme = () => {
-		<DropdownMenu>
+        const newTheme = theme === "light" ? "dark" : "light";
-			<DropdownMenuTrigger asChild>
+        setTheme(newTheme);
-				<Button variant="outline" size="icon">
+    };
-					<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+
-					<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    return (
-					<span className="sr-only">Toggle theme</span>
+        <Button variant="outline" size="icon" onClick={toggleTheme}>
-				</Button>
+            {theme === "dark" ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
-			</DropdownMenuTrigger>
+        </Button>
-			<DropdownMenuContent align="end">
+    );
-				<DropdownMenuItem onClick={() => setTheme("light")}>
+}
-					Light
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>
-					Dark
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("system")}>
-					System
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	)
-}