55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import classes from "./classes.module.scss";
|
|
import Link from "next/link";
|
|
import classNames from "classnames";
|
|
import { useRouter } from "next/router";
|
|
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
|
|
type IProps = {
|
|
text: string | JSX.Element;
|
|
path?: string;
|
|
onClick?: () => void;
|
|
isEnabled?: boolean;
|
|
isActive?: boolean;
|
|
routesActive?: string[];
|
|
target?: "blank" | "self" | "_blank";
|
|
};
|
|
|
|
type IPropsClass = IProps;
|
|
type IStateClass = {};
|
|
|
|
class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
|
|
static defaultProps = { isEnabled: true };
|
|
public override render(): JSX.Element | null {
|
|
if (!this.props.isEnabled) return null;
|
|
return (
|
|
<Link
|
|
href={this.props.path ?? ""}
|
|
className={classNames(classes["root"], this.props.isActive && [classes["active"]])}
|
|
onClick={this.props.onClick}
|
|
target={this.props.target}>
|
|
<div className={classes["content"]}>
|
|
<Typography
|
|
typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
|
|
color={this.props.isActive ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
|
|
{this.props.text}
|
|
</Typography>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default function NavigationLink(props: IProps) {
|
|
const router = useRouter();
|
|
const { pathname } = router;
|
|
let isActive = props.path === pathname;
|
|
if (props.routesActive) {
|
|
for (const routeActive of props.routesActive) {
|
|
if (isActive) break;
|
|
isActive = pathname.includes(routeActive);
|
|
}
|
|
}
|
|
return <NavigationLinkClass {...props} isActive={isActive} />;
|
|
}
|