| import { cn } from "#/utils/utils"; | |
| interface TabButtonProps { | |
| isActive: boolean; | |
| children: React.ReactNode; | |
| onClick: () => void; | |
| className?: string; | |
| disabled?: boolean; | |
| } | |
| export function TabButton({ | |
| isActive, | |
| children, | |
| onClick, | |
| className, | |
| disabled = false, | |
| }: TabButtonProps) { | |
| return ( | |
| <button | |
| type="button" | |
| disabled={disabled} | |
| className={cn( | |
| "px-4 py-2 font-normal border-b-2 transition-colors", | |
| isActive | |
| ? "border-foreground text-foreground" | |
| : "border-transparent text-[var(--oh-muted)] hover:text-[var(--oh-foreground)]", | |
| disabled && "opacity-50 cursor-not-allowed", | |
| className, | |
| )} | |
| onClick={onClick} | |
| aria-selected={isActive} | |
| role="tab" | |
| > | |
| {children} | |
| </button> | |
| ); | |
| } | |