40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import React, { useEffect } from "react";
|
|
|
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import useHoverable from "@Front/Hooks/useHoverable";
|
|
|
|
type IHeaderLinkProps = {
|
|
text: string | JSX.Element;
|
|
path: string;
|
|
routesActive?: string[];
|
|
};
|
|
|
|
export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
|
|
const router = useRouter();
|
|
const { pathname } = router;
|
|
const [isActive, setIsActive] = React.useState(props.path === pathname);
|
|
const { handleMouseLeave, handleMouseEnter, isHovered } = useHoverable();
|
|
|
|
useEffect(() => {
|
|
if (props.path === pathname) setIsActive(true);
|
|
if (props.routesActive) {
|
|
for (const routeActive of props.routesActive) {
|
|
if (isActive) break;
|
|
if (pathname.includes(routeActive)) setIsActive(true);
|
|
}
|
|
}
|
|
}, [isActive, pathname, props.path, props.routesActive]);
|
|
|
|
return (
|
|
<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
|
|
<Typography
|
|
typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
|
|
color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
|
|
{props.text}
|
|
</Typography>
|
|
</Link>
|
|
);
|
|
}
|