Underline Tabs

export function UnderlineTabs({ tabs, active, onChange }) {
  return (
    <div className="flex gap-6 border-b border-slate-200">
      {tabs.map((tab) => (
        <button
          key={tab}
          onClick={() => onChange(tab)}
          className={`relative pb-3 text-sm font-medium transition
            ${active === tab ? "text-slate-900" : "text-slate-400 hover:text-slate-600"}`}
        >
          {tab}
          {active === tab && (
            <span className="absolute -bottom-px left-0 h-0.5 w-full bg-indigo-600" />
          )}
        </button>
      ))}
    </div>
  );
}