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 | 2x 2x 2x 2x 2x 2x 16x 16x 16x 16x 16x 16x 16x 16x 2x 2x 16x | import React from "react";
import { ListItemProps, ListItemStyleProps } from "./ListItem.types";
import styled from "styled-components";
import Text from "../../Text/Text";
import { useTheme } from "../../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../../helpers/helpers";
import colorTokens from "../../../tokens/colors.json";
const ListItem = ({
children,
style,
className,
size = "medium",
color = colorTokens.default.primary.main,
}: ListItemProps) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
return (
<StyledListItem
style={style}
className={className}
$colorPalette={colorPalette}
$color={color}
$size={size}
>
{typeof children === "string" ? (
<Text disableColor size={size} variant="paragraph">
{children}
</Text>
) : (
children
)}
</StyledListItem>
);
};
export default ListItem;
const StyledListItem = styled.li<ListItemStyleProps>`
${(props) => {
return `
font-size: ${props.$size === "large" ? "1.25rem" : props.$size === "medium" ? "1rem" : "0.875rem"};
color: ${props.$colorPalette[props.$color].accentScale[10]};
`;
}}
`;
|