diff options
Diffstat (limited to 'components/Typography/index.tsx')
-rw-r--r-- | components/Typography/index.tsx | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/components/Typography/index.tsx b/components/Typography/index.tsx new file mode 100644 index 0000000..b9babc0 --- /dev/null +++ b/components/Typography/index.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import styles from './typo.module.scss'; +import clsx from 'clsx'; + + +type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body'; +type Align = 'inherit' | 'left' | 'center' | 'right'; + +interface TypographyProps extends React.HTMLAttributes<HTMLElement> { + variant?: Variant; + align?: Align; + gutter?: boolean; +} + +const variantTagMap: Record<Variant, keyof JSX.IntrinsicElements> = { + h1: 'h1', + h2: 'h2', + h3: 'h3', + h4: 'h4', + h5: 'h5', + h6: 'h6', + body: 'p' +}; + +const Typography: React.FC<TypographyProps> = ({ + variant = 'body', + align = 'inherit', + gutter = false, + className, + ...props +}) => { + const Tag = variantTagMap[variant] as keyof React.ReactHTML; + + const typographyClassName = clsx( + styles[`typo-${variant}`], + { + [`align-${align}`]: align !== 'inherit', + [styles['typo-gutter']]: gutter + }, + className + ); + + return <Tag className={typographyClassName} {...props} />; +}; + +export default Typography; + |