44 lines
1.1 KiB
TypeScript
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>
|
|
);
|
|
}
|