echecsfrance/components/ThemeSwitcher.tsx

"use client";

import { MdBrightness2, MdCircle } from "react-icons/md";
import useDarkMode from "@/hooks/useDarkMode";
import { useEffect, useState } from "react";
import "@/css/theme-toggle.css";

const ThemeSwitcher = () => {
  const [mounted, setMounted] = useState(false);
  const [colorTheme, setTheme] = useDarkMode();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <div>
      {colorTheme === "light" ? (
        <div className="toggle-dark" onClick={() => setTheme("light")}>
          <MdBrightness2 className="theme-icon-dark" />
        </div>
      ) : (
        <div className="toggle" onClick={() => setTheme("dark")}>
          <MdCircle className="theme-icon" />
        </div>
      )}
    </div>
  );
};

export default ThemeSwitcher;