import type { LucideIcon } from 'lucide-react';
import { cn } from '../lib/classname.ts';
type TabLinkProps = {
icon: LucideIcon;
text: string;
isActive: boolean;
isExternal?: boolean;
badgeText?: string;
hideTextOnMobile?: boolean;
url: string;
};
export function TabLink(props: TabLinkProps) {
const {
icon: Icon,
badgeText,
isExternal = false,
url,
text,
isActive,
hideTextOnMobile = false,
} = props;
const className = cn(
'inline-flex group transition-colors items-center gap-1.5 border-b-2 px-2 pb-2.5 text-sm',
{
'cursor-default border-b-black font-medium text-black': isActive,
'border-b-transparent font-normal text-gray-400 hover:text-gray-700':
!isActive,
'font-medium hover:text-black text-gray-500 px-0': isExternal,
},
);
const textClass = cn({
'hidden sm:inline': hideTextOnMobile,
});
const badgeNode = badgeText && (
{badgeText}
);
if (isActive) {
return (
{text}
{badgeNode}
);
}
return (
{
e.preventDefault();
}}
href={url}
className={className}
>
{text}
{badgeNode}
);
}