65 lines
1.6 KiB
TypeScript
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;
|