64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { Flex, Box, Text } from "@mantine/core";
|
|
import { Link, useRouterState } from "@tanstack/react-router";
|
|
import styles from "./styles.module.css";
|
|
import { Icon } from "@phosphor-icons/react";
|
|
import { useMemo } from "react";
|
|
|
|
interface NavLinkProps {
|
|
href: string;
|
|
label: string;
|
|
Icon: Icon;
|
|
include?: string[];
|
|
exclude?: string[];
|
|
}
|
|
|
|
export const NavLink = ({
|
|
href,
|
|
label,
|
|
Icon,
|
|
include,
|
|
exclude,
|
|
}: NavLinkProps) => {
|
|
const router = useRouterState();
|
|
const isActive = useMemo(
|
|
() =>
|
|
(!exclude?.some((e) => router.location.pathname.includes(e)) &&
|
|
(router.location.pathname === href ||
|
|
(router.location.pathname.includes(href) && href !== "/"))) ||
|
|
include?.includes(router.location.pathname),
|
|
[router.location.pathname, href]
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
component={Link}
|
|
to={href}
|
|
className={styles.navLinkBox}
|
|
p={{ base: 0, sm: 8 }}
|
|
>
|
|
<Flex
|
|
direction={{ base: "column", md: "row" }}
|
|
align="center"
|
|
gap={{ base: 0, md: "xs" }}
|
|
>
|
|
<Icon
|
|
weight={isActive ? "fill" : "regular"}
|
|
size={28}
|
|
style={{
|
|
color: isActive ? "var(--mantine-primary-color-filled)" : undefined,
|
|
}}
|
|
/>
|
|
<Text
|
|
visibleFrom="md"
|
|
ta="center"
|
|
size="md"
|
|
fw={isActive ? 800 : 500}
|
|
c={isActive ? "var(--mantine-primary-color-filled)" : undefined}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
};
|