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 | 135x 135x 1702x 1702x 1702x 1702x | 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> ) } |