37 lines
991 B
TypeScript
37 lines
991 B
TypeScript
import classNames from 'classnames'
|
|
import { ReactNode } from 'react'
|
|
|
|
interface Props {
|
|
children: ReactNode | string
|
|
className?: string
|
|
monospace?: boolean
|
|
size?: '3xs' | '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
|
|
tag?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4'
|
|
uppercase?: boolean
|
|
}
|
|
|
|
const headlines = ['h1', 'h2', 'h3', 'h4']
|
|
const headMap = ['6xl', '5xl', '4xl', '3xl']
|
|
|
|
export default function Text(props: Props) {
|
|
const tag = props.tag ?? 'p'
|
|
const size = props.size ?? 'base'
|
|
|
|
const tagIndex = headlines.indexOf(tag)
|
|
const sizeClass = tagIndex > -1 ? headMap[tagIndex] : size
|
|
const HtmlElement = tag as keyof JSX.IntrinsicElements
|
|
|
|
return (
|
|
<HtmlElement
|
|
data-testid='text-component'
|
|
className={classNames(
|
|
props.className,
|
|
props.uppercase ? `text-${sizeClass}-caps` : `text-${sizeClass}`,
|
|
props.monospace && 'number',
|
|
)}
|
|
>
|
|
{props.children}
|
|
</HtmlElement>
|
|
)
|
|
}
|