forked from crowetic/commerce
55 lines
985 B
TypeScript
55 lines
985 B
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'
|
||
|
|
|
||
|
|
const Text: FunctionComponent<Props> = ({
|
||
|
|
style,
|
||
|
|
className = '',
|
||
|
|
variant = 'body',
|
||
|
|
children,
|
||
|
|
}) => {
|
||
|
|
const componentsMap: {
|
||
|
|
[P in Variant]: React.ComponentType<any> | string
|
||
|
|
} = {
|
||
|
|
body: 'p',
|
||
|
|
heading: 'h2',
|
||
|
|
}
|
||
|
|
|
||
|
|
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',
|
||
|
|
},
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
style={style}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Component>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Text
|