Compound Component Pattern

import { createContext, useContext, useState } from "react";

const Ctx = createContext<{ active: string; set: (s: string) => void } | null>(null);

export function Tabs({ children, defaultTab }: any) {
  const [active, set] = useState(defaultTab);
  return <Ctx.Provider value={{ active, set }}>{children}</Ctx.Provider>;
}

Tabs.Tab = function Tab({ id, children }: any) {
  const { active, set } = useContext(Ctx)!;
  return (
    <button
      onClick={() => set(id)}
      className={active === id ? "border-b-2 border-green-500 font-semibold" : "text-slate-400"}
    >{children}</button>
  );
};

Tabs.Panel = function Panel({ id, children }: any) {
  return useContext(Ctx)!.active === id ? <div>{children}</div> : null;
};