Refactor to use hooks (#436)

components/custom/theme-toggle.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { setTheme, theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <div
+      className="cursor-pointer"
+      onClick={() => {
+        setTheme(theme === "dark" ? "light" : "dark");
+      }}
+    >
+      {`Toggle ${theme === "light" ? "dark" : "light"} mode`}
+    </div>
+  );
+}