File size: 716 Bytes
a270696 f0f5bef a270696 f0f5bef a270696 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // 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>
);
}
|