| // 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> | |
| ); | |
| } | |