4
0
forked from crowetic/commerce

68 lines
1.3 KiB
TypeScript
Raw Normal View History

2020-10-24 16:53:25 -03:00
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
2020-11-26 13:36:59 -03:00
children?: React.ReactNode | any
html?: string
2020-10-24 16:53:25 -03:00
}
2020-10-24 19:00:57 -03:00
type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
2020-10-24 16:53:25 -03:00
const Text: FunctionComponent<Props> = ({
style,
className = '',
variant = 'body',
children,
2020-11-26 13:36:59 -03:00
html,
2020-10-24 16:53:25 -03:00
}) => {
const componentsMap: {
[P in Variant]: React.ComponentType<any> | string
} = {
2020-12-20 16:57:31 -03:00
body: 'div',
2020-10-24 17:55:30 -03:00
heading: 'h1',
pageHeading: 'h1',
2020-10-24 19:00:57 -03:00
sectionHeading: 'h2',
2020-10-24 16:53:25 -03:00
}
const Component:
| JSXElementConstructor<any>
| React.ReactElement<any>
| React.ComponentType<any>
| string = componentsMap![variant!]
2020-11-26 13:36:59 -03:00
const htmlContentProps = html
? {
dangerouslySetInnerHTML: { __html: html },
}
: {}
2020-10-24 16:53:25 -03:00
return (
<Component
className={cn(
s.root,
{
[s.body]: variant === 'body',
[s.heading]: variant === 'heading',
2020-10-24 17:55:30 -03:00
[s.pageHeading]: variant === 'pageHeading',
2020-10-24 19:00:57 -03:00
[s.sectionHeading]: variant === 'sectionHeading',
2020-10-24 16:53:25 -03:00
},
className
)}
style={style}
2020-11-26 13:36:59 -03:00
{...htmlContentProps}
2020-10-24 16:53:25 -03:00
>
{children}
</Component>
)
}
export default Text