47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import classNames from "classnames";
|
|
import Link from "next/link";
|
|
import router from "next/router";
|
|
import React from "react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import Typography, { ITypo } from "../../Typography";
|
|
import classes from "./classes.module.scss";
|
|
|
|
type IPropsClass = {
|
|
text: string | JSX.Element;
|
|
path?: string;
|
|
isActive?: boolean;
|
|
};
|
|
|
|
type IStateClass = {};
|
|
|
|
class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
|
|
public override render(): JSX.Element {
|
|
if (this.props.path !== "" && this.props.path !== undefined) {
|
|
return (
|
|
<Link href={this.props.path} className={classNames(classes["root"], this.props.isActive && classes["active"])}>
|
|
<div className={classes["content"]}>
|
|
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
|
|
</div>
|
|
{this.props.isActive && <div className={classes["underline"]} />}
|
|
</Link>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className={classNames(classes["root"], classes["desactivated"])}>
|
|
<div className={classes["content"]}>
|
|
<Typography typo={ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function HeaderLink(props: IPropsClass) {
|
|
const [url, setUrl] = useState("");
|
|
useEffect(() => setUrl(router?.asPath), []);
|
|
const isActive = url.includes(props.path!);
|
|
return <HeaderLinkClass {...props} isActive={isActive} />;
|
|
}
|