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 | 7x 1x | import { type ReactNode, type HTMLAttributes, type FC } from 'react';
import cn from 'classnames';
import '../styles/components/header.scss';
type HeaderProps = {
/**
* Component to display where the link to the home page will be
*/
homepageLink?: ReactNode;
/**
* Search component
*/
search?: ReactNode;
/**
* Secondary items
*/
secondaryItems?: ReactNode;
/**
* Subtext
*/
subtext?: ReactNode;
/**
* Flag representing if the header should be in a "negative" style
*/
isNegative?: boolean;
};
const Header: FC<HeaderProps & HTMLAttributes<HTMLDivElement>> = ({
search,
secondaryItems,
subtext,
isNegative = false,
className,
homepageLink,
children,
...props
}) => (
<div
className={cn(className, 'header', { 'header--negative': isNegative })}
{...props}
>
<div className="header__link">{homepageLink}</div>
<div className="header__navigation">{children}</div>
<div className="header__search">{search}</div>
{(secondaryItems || subtext) && (
<div className="header__secondary">
{secondaryItems && (
<div className="header__navigation">{secondaryItems}</div>
)}
{subtext && <small>{subtext}</small>}
</div>
)}
</div>
);
export default Header;
|