components/editor/header.tsx

"use client";
import Image from "next/image";
import { TbMenu2 } from "react-icons/tb";
import { MdOutlineNightlight, MdOutlineLightMode } from "react-icons/md";
import classNames from "classnames";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import("highlight.js/styles/atom-one-dark.css");

import HFLogo from "assets/hf-logo.svg";
import { useUpdateEffect } from "react-use";

export const EditorHeader = ({
  onToggleMenu,
}: {
  onToggleMenu: () => void;
}) => {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

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

  if (!mounted) {
    return null;
  }

  return (
    <header className="px-4 xl:px-6 py-2.5 border-b dark:border-slate-950 border-gray-200 bg-white dark:bg-slate-950 flex justify-between items-center">
      <div className="w-5 h-5 block xl:hidden" onClick={onToggleMenu}>
        <TbMenu2 className="w-full h-full text-slate-600 dark:text-slate-100" />
      </div>
      <Image
        src={HFLogo}
        alt="Hugging Face Logo"
        width={34}
        height={34}
        className="max-xl:hidden"
      />
      <p className="text-gray-800 dark:text-gray-300 font-code text-sm font-semiboldn">
        Hub API Playground
      </p>
      <div className="rounded-full bg-gray-100 border-gray-200 dark:bg-slate-800 border dark:border-slate-700 p-0.5 flex items-center justify-between relative z-[1] cursor-pointer">
        <div
          className={classNames(
            "transition-transform duration-200 ease-in-out top-0.5 w-6 h-6 rounded-full absolute -z-[1]",
            {
              "translate-x-full bg-indigo-500": theme === "dark",
              "translate-x-0 bg-amber-500": theme === "light",
            }
          )}
        />
        <div
          className={`size-6 rounded-full flex items-center justify-center ${
            theme === "light"
              ? "text-white"
              : "dark:text-slate-500 text-gray-400"
          } p-1`}
          onClick={() => {
            setTheme("light");
          }}
        >
          <MdOutlineLightMode />
        </div>
        <div
          className={`size-6 rounded-full flex items-center justify-center ${
            theme === "dark"
              ? "text-white"
              : "dark:text-slate-500 text-gray-400"
          } p-1`}
          onClick={() => {
            setTheme("dark");
          }}
        >
          <MdOutlineNightlight />
        </div>
      </div>
    </header>
  );
};