cal.pub0.org/packages/ui/v2/navigation/tabs/HorizontalTabItem.tsx

65 lines
1.6 KiB
TypeScript

import noop from "lodash/noop";
import Link from "next/link";
import { useRouter } from "next/router";
import { MouseEventHandler } from "react";
import classNames from "@calcom/lib/classNames";
export type HorizontalTabItemProps = {
name: string;
disabled?: boolean;
} & (
| {
/** If you want to change query param tabName as per current tab */
href: string;
tabName?: never;
}
| {
href?: never;
/** If you want to change the path as per current tab */
tabName: string;
}
);
const HorizontalTabItem = ({ name, href, tabName, ...props }: HorizontalTabItemProps) => {
const router = useRouter();
let newHref = "";
let isCurrent;
if (href) {
newHref = href;
isCurrent = router.asPath === href;
} else if (tabName) {
newHref = "";
isCurrent = router.query.tabName === tabName;
}
const onClick: MouseEventHandler = tabName
? (e) => {
e.preventDefault();
router.push({
query: {
...router.query,
tabName,
},
});
}
: noop;
return (
<Link key={name} href={props.disabled ? "#" : newHref}>
<a
onClick={onClick}
className={classNames(
isCurrent ? "bg-gray-200 text-gray-900" : " text-gray-600 hover:bg-gray-100 hover:text-gray-900",
"rounded-r-md py-[10px] px-4 text-sm font-medium leading-4",
props.disabled && "pointer-events-none !opacity-30"
)}
aria-current={isCurrent ? "page" : undefined}>
{name}
</a>
</Link>
);
};
export default HorizontalTabItem;