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 | 8x 1x | import { type FC, type HTMLAttributes, type ReactNode } from 'react';
import cn from 'classnames';
import type { HeadingLevels } from '../types/common';
import '../styles/components/hero-container.scss';
type HeroContainerProps = HTMLAttributes<HTMLElement> & {
/**
* The heading of the component
*/
headingContent?: ReactNode;
/**
* The heading level
*/
headingLevel?: HeadingLevels;
/**
* CSS classes to pass to the component heading
*/
headingClassName?: string;
/**
* Remove left and right padding
*/
noSidePadding?: boolean;
};
export const HeroContainer: FC<HeroContainerProps> &
HTMLAttributes<HTMLElement> = ({
headingContent,
headingLevel: HeadingLevel = 'h2',
headingClassName,
children,
className,
noSidePadding = false,
...props
}) => (
<section
className={cn(
'hero-container',
className,
!noSidePadding && 'hero-container--side-padding'
)}
{...props}
>
{headingContent && (
<HeadingLevel
className={cn(headingClassName, 'hero-container__title', 'big')}
>
{headingContent}
</HeadingLevel>
)}
{children}
</section>
);
export default HeroContainer;
|