48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import {
|
|
FontWeightVariants,
|
|
TypographyHtmlTagVariants,
|
|
TypographyFontWeightVariantsMap
|
|
} from 'core/_variants'
|
|
|
|
|
|
interface Props extends React.ComponentPropsWithoutRef<"div"> {
|
|
htmlTag?: TypographyHtmlTagVariants | undefined;
|
|
fontWeightVariant?: FontWeightVariants;
|
|
};
|
|
|
|
const typographyFontWeightVariants: TypographyFontWeightVariantsMap<string> = {
|
|
thin: 'font-thin',
|
|
extralight: 'font-extralight',
|
|
light: 'font-light',
|
|
normal: 'font-normal',
|
|
medium: 'font-medium',
|
|
semibold: 'font-semibold',
|
|
bold: 'font-bold',
|
|
extrabold: 'font-extrabold',
|
|
black: 'font-black'
|
|
|
|
}
|
|
|
|
const Typography = ({
|
|
children,
|
|
htmlTag,
|
|
fontWeightVariant='normal',
|
|
className
|
|
}: Props) => {
|
|
const As = htmlTag || 'div' ;
|
|
return (
|
|
<As
|
|
className={classNames([
|
|
[`${typographyFontWeightVariants[fontWeightVariant]}`],
|
|
className
|
|
])}
|
|
>
|
|
{children}
|
|
</As>
|
|
);
|
|
}
|
|
|
|
export default Typography
|