frontend/src/components/TabButton.tsx

// Underlined tab button, shared by the home-page tool and the sample-dog profile so both tab strips
// look and behave the same.
import type { ReactNode } from "react";

export default function TabButton({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: ReactNode;
}) {
  return (
    <button
      type="button"
      role="tab"
      aria-selected={active}
      onClick={onClick}
      className={`px-5 py-2.5 -mb-px border-b-2 text-base font-medium transition ${
        active
          ? "border-brand-500 text-brand-700"
          : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
      }`}
    >
      {children}
    </button>
  );
}