import { type ForwardedRef, forwardRef, type ForwardRefRenderFunction, type HTMLAttributes, type ReactNode, } from 'react'; import styles from './heading.module.scss'; // eslint-disable-next-line @typescript-eslint/no-magic-numbers export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; export type HeadingProps = HTMLAttributes & { /** * The heading body. */ children: ReactNode; /** * Use an heading element or only its styles. * * @default false */ isFake?: boolean; /** * HTML heading level. */ level: HeadingLevel; }; const HeadingWithRef: ForwardRefRenderFunction< HTMLHeadingElement | HTMLParagraphElement, HeadingProps > = ( { children, className = '', isFake = false, level, ...props }, ref: ForwardedRef ) => { const HeadingTag = `h${level}` as const; const levelClass = styles[`heading--${level}`]; const headingClass = `${levelClass} ${className}`; return isFake ? (

{children}

) : ( {children} ); }; /** * Heading component. * * Render an HTML heading element or a paragraph with heading styles. */ export const Heading = forwardRef(HeadingWithRef); href='/www.armandphilippot.com/about/'>aboutsummaryrefslogtreecommitdiffstats
blob: 0b9d5fb4fcb30ab27da65ac46d2536365796b8f3 (plain)
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