Implemented theme switcher as an exercise

components/ThemeToggle/index.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setMounted(true), 10);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <div className="flex gap-4 justify-end">
+      <button
+        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+      >
+        {theme === "dark" ? "🌙" : "☀️"}
+      </button>
+      <button
+        onClick={() => setTheme("system")}
+        className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+      >
+        🖥️
+      </button>
+    </div>
+  );
+}