2024-07-02 14:52:36 +02:00

44 lines
1.1 KiB
TypeScript

import classNames from "classnames";
import classes from "./classes.module.scss";
import Link from "next/link";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import { useRouter } from "next/router";
type ITabItem = {
label: string;
path: string;
activePaths?: string[];
};
type IProps = {
items: ITabItem[];
};
export default function NavTab(props: IProps) {
const router = useRouter();
return (
<div className={classes["root"]}>
<nav>
{props.items.map((item, index) => {
let isMatch = false;
if (item.activePaths) {
isMatch = item.activePaths.some((path) => router.pathname.includes(path));
} else {
isMatch = router.pathname.includes(item.path) ? true : false;
}
return (
<Link
key={item.path.toString()}
href={item.path}
className={classNames(classes["link"], isMatch && classes["active"])}>
<Typography key={index} typo={isMatch ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}>
{item.label}
</Typography>
</Link>
);
})}
</nav>
</div>
);
}