Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import { styled, Typography, TypographyProps } from "@mui/material";
import NotificationBadge from "components/NotificationBadge";
import Link from "next/link";
import { useRouter } from "next/router";
import { baseRoute } from "routes";
interface NavButtonProps {
route: string;
label: string;
labelVariant?: Exclude<TypographyProps["variant"], undefined>;
notificationCount?: number;
}
const StyledNextLink = styled(Link, {
shouldForwardProp: (prop) =>
prop !== "isNotification" && prop !== "isSelected",
})<{
isNotification: boolean;
isSelected: boolean;
}>(({ theme, isNotification, isSelected }) => ({
color: theme.palette.text.secondary,
display: "flex",
flex: "1",
fontSize: "2rem",
maxWidth: "10.5rem",
padding: theme.spacing(1, 1.5),
...(isNotification && { marginRight: "0.8rem" }),
...(isSelected && { color: theme.palette.secondary.main }),
}));
const StyledTypography = styled(Typography)(({ theme }) => ({
alignSelf: "center",
marginTop: 0,
}));
export default function NavButton({
route,
label,
labelVariant = "h3",
notificationCount,
}: NavButtonProps) {
const router = useRouter();
const isActive =
route === baseRoute
? router.asPath === route
: router.asPath.includes(route);
return (
<StyledNextLink
href={route}
isNotification={!!notificationCount}
isSelected={isActive}
>
<NotificationBadge count={notificationCount}>
<StyledTypography variant={labelVariant} noWrap>
{label}
</StyledTypography>
</NotificationBadge>
</StyledNextLink>
);
}
|