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 | import { Text } from "@chakra-ui/react";
import type { FunctionComponent, ReactNode } from "react";
import { NavLink } from "../NavLink";
interface NavItemWrapperProps {
"data-event"?: string;
path?: string;
title: string;
showToggle: boolean;
children: ReactNode;
variant?: "sm" | "md";
}
export const NavItemWrapper: FunctionComponent<NavItemWrapperProps> = ({
children,
"data-event": dataEvent,
path,
title,
showToggle,
variant,
}) => {
const smProps = {
fontSize: "sm",
};
const mdProps = {
fontSize: "md",
};
const sharedProps = {
_hover: { bg: "rgba(0, 124, 253, 0.05)" },
overflow: "hidden",
pl: 1,
py: showToggle ? 2 : 1,
marginLeft: showToggle ? 0 : 1,
fontWeight: showToggle ? "bold" : undefined,
textOverflow: "ellipsis",
whiteSpace: "nowrap" as const,
w: "100%",
...(variant === "sm" ? smProps : mdProps),
};
return path ? (
<NavLink data-event={dataEvent} title={title} to={path} {...sharedProps}>
{children}
</NavLink>
) : (
<Text {...sharedProps}>{children}</Text>
);
};
|