components/editor/main/tabs.tsx

import { ApiRoute } from "@/utils/type";
import classNames from "classnames";

const TABS = ["headers", "parameters", "body", "snippet"];
export const Tabs = ({
  active,
  setActive,
  endpoint,
}: {
  active: "headers" | "parameters" | "body" | "snippet";
  setActive: (active: "headers" | "parameters" | "body" | "snippet") => void;
  endpoint: ApiRoute;
}) => {
  return (
    <ul className="border-b border-gray-200 dark:border-0 flex items-center justify-center gap-0 bg-white dark:bg-slate-950/40">
      {TABS.map(
        (tab: string) =>
          (["headers", "snippet"].includes(tab) || tab in endpoint) && (
            <li
              key={tab}
              className={classNames(
                "text-sm px-6 text-gray-400 hover:text-gray-500 dark:text-slate-400 dark:hover:text-slate-400 dark:font-semibold uppercase -tracking-wider cursor-pointer py-4 border-b-2 border-transparent",
                {
                  "!text-gray-500 !border-black dark:!border-slate-100 dark:!text-slate-100":
                    tab === active,
                }
              )}
              onClick={() => setActive(tab as any)}
            >
              {tab.charAt(0).toUpperCase() + tab.slice(1)}
            </li>
          )
      )}
    </ul>
  );
};