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 | 8x 4x | import { type FC, type ReactNode, type HTMLAttributes } from 'react';
import cn from 'classnames';
import { formatLargeNumber } from '../utils';
import type { HeadingLevels } from '../types/common';
import '../styles/components/page-intro.scss';
type PageIntroProps = {
/**
* The title
*/
heading: ReactNode;
/**
* The heading level
*/
headingLevel?: HeadingLevels;
/**
* CSS classes to pass to the component heading
*/
headingClassName?: string;
/**
* Optional heading postscript to follow resultsCount
*/
headingPostscript?: ReactNode;
/**
* Number of results
*/
resultsCount?: number;
};
const PageIntro: FC<PageIntroProps & HTMLAttributes<HTMLDivElement>> = ({
heading,
resultsCount,
headingPostscript,
headingLevel: HeadingLevel = 'h1',
headingClassName,
children,
className,
...props
}) => (
<div className={cn(className, 'page-intro')} {...props}>
<HeadingLevel className={cn(headingClassName)}>
{heading}
{resultsCount !== undefined && (
/* Not sure why fragments and keys are needed, but otherwise gets the
React key warnings messages and children are rendered as array... */
<small key="count">
{' '}
{formatLargeNumber(resultsCount)} result
{resultsCount === 1 ? '' : 's'}{' '}
</small>
)}
{headingPostscript}
</HeadingLevel>
{children}
</div>
);
export default PageIntro;
|