36 lines
922 B
TypeScript
36 lines
922 B
TypeScript
import { createElement, FC, HTMLAttributes, PropsWithChildren } from 'react'
|
|
import cx from 'classnames'
|
|
import typography from '../../styles/typography.module.css'
|
|
|
|
interface Props extends HTMLAttributes<HTMLSpanElement & HTMLHeadingElement> {
|
|
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span'
|
|
type: 'pageTitle' | 'section' | 'subsection'
|
|
className?: string
|
|
}
|
|
|
|
export const Heading: FC<PropsWithChildren<Props>> = ({
|
|
tag,
|
|
type,
|
|
className,
|
|
children,
|
|
...rest
|
|
}) => {
|
|
const TAG: Record<Props['type'], Exclude<Props['tag'], undefined>> = {
|
|
pageTitle: 'h1',
|
|
section: 'h2',
|
|
subsection: 'h3'
|
|
}
|
|
return createElement(
|
|
tag ?? TAG[type],
|
|
{
|
|
className: cx(className, {
|
|
[typography.displayLarge]: type === 'pageTitle',
|
|
[typography.headlineMedium]: type === 'section',
|
|
[typography.titleLarge]: type === 'subsection'
|
|
}),
|
|
...rest
|
|
},
|
|
children
|
|
)
|
|
}
|