import React, { FunctionComponent, JSXElementConstructor, CSSProperties, } from 'react' import cn from 'classnames' import s from './Text.module.css' interface Props { variant?: Variant className?: string style?: CSSProperties children?: React.ReactNode | any html?: string } type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' const Text: FunctionComponent = ({ style, className = '', variant = 'body', children, html, }) => { const componentsMap: { [P in Variant]: React.ComponentType | string } = { body: 'div', heading: 'h1', pageHeading: 'h1', sectionHeading: 'h2', } const Component: | JSXElementConstructor | React.ReactElement | React.ComponentType | string = componentsMap![variant!] const htmlContentProps = html ? { dangerouslySetInnerHTML: { __html: html }, } : {} return ( {children} ) } export default Text