38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { Tab } from "../../../types/tab";
|
|
|
|
interface NavbarTabProps {
|
|
tab: Tab;
|
|
isSelected: boolean;
|
|
onClick: (tab: Tab) => void;
|
|
}
|
|
|
|
const NavbarTabDesktop = ({
|
|
tab,
|
|
onClick,
|
|
isSelected = false,
|
|
}: NavbarTabProps) => {
|
|
return (
|
|
<button
|
|
className="px-[45px] text-[#73787C] hover:text-black relative w-fit h-full"
|
|
onClick={() => onClick(tab)}
|
|
>
|
|
<div
|
|
className={`border-b-2 h-full flex items-center transition-all duration-300 text-[45px] ${
|
|
isSelected
|
|
? "border-b-[#00BED7]"
|
|
: "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
|
|
}`}
|
|
>
|
|
{tab.value}
|
|
</div>
|
|
{tab.count !== 0 && (
|
|
<div className="absolute top-[24px] right-0 w-[38.4px] h-[38.4px] bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-[0.5] pr-[1px]">
|
|
<span className="leading-none">{tab.count}</span>
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default NavbarTabDesktop;
|