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 | 2x 2x 2x 2x 2x 2x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 2x 2x 2x 13x 13x | import React from "react";
import {
NavigationBarHeaderProps,
NavigationBarHeaderStyleProps,
} from "./NavigationBarHeader.types";
// import colors from "../../../tokens/colors.json";
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 NavigationBarHeader = ({
children,
style,
className,
leadingIcon,
trailingIcon,
size = "small",
color = colorTokens.default.primary.main,
}: NavigationBarHeaderProps) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
return (
<StyledNavBarHeader
$colorPalette={colorPalette}
$color={color}
style={style}
className={className}
>
{leadingIcon && <span>{leadingIcon}</span>}
{typeof children === "string" ? (
<Text color={color} variant="span" size={size}>
{children}
</Text>
) : (
children
)}
{trailingIcon && <span>{trailingIcon}</span>}
</StyledNavBarHeader>
);
};
export default NavigationBarHeader;
NavigationBarHeader.displayName = "NavigationBarHeader";
const StyledNavBarHeader = styled.li<NavigationBarHeaderStyleProps>`
display: flex;
position: relative;
flex-direction: row;
gap: 1rem;
align-items: center;
border-radius: 0.5rem;
padding: 0.25rem 0 0.25rem 2.25rem;
&:before {
content: "";
position: absolute;
width: 0.35rem;
height: 0.35rem;
left: 0;
margin-left: 0.75rem;
border-radius: 50%;
border: 1px solid ${(props) => props.$colorPalette[props.$color].grayScale[5]};
}
&:after {
content: "";
position: absolute;
height: 50%;
margin-left: 0.93rem;
border-left: 1px solid
${(props) => props.$colorPalette[props.$color].grayScale[5]};
top: calc(50% + 0.175rem);
left: 0;
}
`; |