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 | 128x 128x 1649x 1649x 1649x 1649x | type HeadlineProps = {
/** Content of Headline. */
children: React.ReactNode
/** Specifies if its an h1, h2, h3,... */
level?: 1 | 2 | 3 | 4 | 5 | 6
/** Customize size. Is also set with level. */
size?: string
/** If true adds margin. */
hasMargin?: boolean
/** Custom classname. */
className?: string
/** Adds title attribute to headline. */
title?: string
/** For testing. */
datacy?: string
}
/** Defines the classes for each size level */
export const twTextSizes: { [K in Required<HeadlineProps>['level']]: string } = {
1: 'text-2xl md:text-4xl',
2: 'text-2xl md:text-3xl',
3: 'text-xl md:text-2xl',
4: 'text-lg md:text-xl',
5: 'text-base md:text-lg',
6: '',
}
/**
* Custom Headline Component, to easy handle headlines with different level and adjustive styles.
*/
export const Headline: React.FC<HeadlineProps> = ({
level = 1,
children,
size,
title,
hasMargin = true,
className = '',
datacy,
}) => {
const CustomTag = `h${level}` as keyof JSX.IntrinsicElements
const hasSerifFont = level === 1 || level === 2
const fontStyle = hasSerifFont ? ` font-serif ` : ' '
return (
<CustomTag
datacy={datacy}
title={title}
className={`${size ?? twTextSizes[level]}${fontStyle}font-bold ${hasMargin ? 'mb-2' : ''} ${className}`}
>
{children}
</CustomTag>
)
}
|