4
0
forked from crowetic/commerce
2020-10-24 17:55:30 -03:00

57 lines
1.1 KiB
TypeScript

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
}
type Variant = 'heading' | 'body' | 'pageHeading'
const Text: FunctionComponent<Props> = ({
style,
className = '',
variant = 'body',
children,
}) => {
const componentsMap: {
[P in Variant]: React.ComponentType<any> | string
} = {
body: 'p',
heading: 'h1',
pageHeading: 'h1',
}
const Component:
| JSXElementConstructor<any>
| React.ReactElement<any>
| React.ComponentType<any>
| string = componentsMap![variant!]
return (
<Component
className={cn(
s.root,
{
[s.body]: variant === 'body',
[s.heading]: variant === 'heading',
[s.pageHeading]: variant === 'pageHeading',
},
className
)}
style={style}
>
{children}
</Component>
)
}
export default Text