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} />
      <p className="text-gray-800 dark:text-gray-300 font-code text-sm font-semibold">
        Hub API Playground
      </p>
      <div className="hidden xl:flex items-center justify-end gap-3">
        {/* <div className="bg-teal-600 w-3 h-3 rounded-full" />
        <div className="bg-indigo-600 w-3 h-3 rounded-full" />
        <div className="bg-purple-500 w-3 h-3 rounded-full" /> */}
        <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>
      </div>
    </header>
  );
};