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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import React from "react";
import styled from "styled-components";
import { SideBarItemProps, SideBarItemStyleProps } from "./SideBarItem.types";
import Link from "../../Link/Link";
import { useTheme } from "../../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../../helpers/helpers";
import colorTokens from "../../../tokens/colors.json";
const SideBarItem = ({
_index,
value,
children,
className,
style,
size,
selected,
color = colorTokens.default.primary.main,
//Events
onClick,
_getSelectedIndex,
"data-testid": dataTestId,
...props
}: SideBarItemProps) => {
const [_selected, setSelected] = React.useState(selected);
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
React.useEffect(() => {
setSelected(selected)
},[selected]);
const _onClick = (e: React.MouseEvent | React.KeyboardEvent) => {
setSelected(true);
_getSelectedIndex && _getSelectedIndex(_index, value);
onClick && onClick(e);
}
return (
<StyledSideBarItem
$colorPalette={colorPalette}
$color={color}
onClick={_onClick}
$selected={_selected}
className={className}
style={style}
data-testid={dataTestId}
{...props}
>
{typeof children === "string" ? (
<Link
tabIndex={onClick ? 0 : undefined}
preciseColor={_selected ? colorPalette![color].accentScale[10] : colorPalette![color].grayScale[11]}
size={size}
variant="hover"
className={className}
style={style}
onClick={_onClick}
>
{children}
</Link>
) : (
children
)}
</StyledSideBarItem>
);
};
export default SideBarItem;
SideBarItem.displayName = "SideBarItem";
const StyledSideBarItem = styled.div<SideBarItemStyleProps>`
display: flex;
flex-direction: column;
padding: 0.5rem 0.5rem 0.25rem 1rem;
width: fit-content;
positon: relative;
color: ${(props) =>
props.$selected
? props.$colorPalette[props.$color].accentScale[11]
: props.$colorPalette[props.$color].grayScale[11]};
`; |