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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 1x 1x 1x 1x 1x 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 5x 1x 5x 6x 1x 1x 6x 1x 5x | import React from "react";
import {
IconChevronCompactDown,
IconChevronCompactUp,
} from "@tabler/icons-react";
import { HeaderProps, HeaderStyleProps } from "./Header.types";
import styled from "styled-components";
import { useTheme } from "../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../helpers/helpers";
import colorTokens from "../../tokens/colors.json";
const Header = ({
id,
children,
height,
className,
style,
expandable = true,
expandIconProps = {
iconWidth: "3rem",
iconHeight: "1.75rem",
iconRight: "5rem",
iconBottom: "-1.5rem",
},
color = colorTokens.default.primary.main,
"data-testid": dataTestId,
...props
}: HeaderProps) => {
const [expanded, setExpanded] = React.useState<boolean>(true);
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
const ExpandIcon = () => {
const _onExpandHandler = () => {
setExpanded(!expanded);
};
return (
<StyledExpandIcon
$colorPalette={colorPalette}
$color={color}
$expanded={expanded}
$iconWidth={expandIconProps.iconWidth}
$iconHeight={expandIconProps.iconHeight}
$iconRight={expandIconProps.iconRight}
$iconBottom={expandIconProps.iconBottom}
data-testid={expandIconProps["data-testid"]}
onClick={_onExpandHandler}
>
{expanded ? <IconChevronCompactUp /> : <IconChevronCompactDown />}
</StyledExpandIcon>
);
};
return (
<StyledHeader
id={id}
$height={height}
$expanded={expanded}
$colorPalette={colorPalette}
$color={color}
className={className}
style={style}
data-testid={dataTestId}
{...props}
>
{expanded && children}
{expandable && <ExpandIcon />}
</StyledHeader>
);
};
export default Header;
const StyledHeader = styled.header<HeaderStyleProps>`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
z-index: 100;
transition: height 330ms ease-in-out;
padding: 0 1rem;
position: sticky;
top: 0;
${(props) => {
return `
background-color: ${props.$colorPalette[props.$color].background};
height: ${props.$expanded ? props.$height : "0rem"};
box-shadow: ${props.$expanded ? "none" : "0 0 10px 0 rgba(0, 0, 0, 0.35)"};
outline: ${props.$expanded ? `1px solid ${props.$colorPalette[props.$color].grayScale[5]}` : "none"};
`;
}}
`;
const StyledExpandIcon = styled.header<HeaderStyleProps>`
position: absolute;
border-radius: 0 0 0.25rem 0.25rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow:
-4px 5px 5px 0 rgba(0, 0, 0, 0.15),
4px 5px 5px 0 rgba(0, 0, 0, 0.15);
svg {
width: 100%;
height: 100%;
}
${(props) => {
return `
right: ${props.$iconRight};
bottom: ${props.$iconBottom};
width: ${props.$iconWidth};
height: ${props.$iconHeight};
background-color: ${props.$colorPalette[props.$color].background};
color: ${props.$colorPalette[props.$color].grayScale[11]};
`;
}}
`;
|