diff options
Diffstat (limited to 'components/Typography')
-rw-r--r-- | components/Typography/index.tsx | 47 | ||||
-rw-r--r-- | components/Typography/typo.module.scss | 64 |
2 files changed, 0 insertions, 111 deletions
diff --git a/components/Typography/index.tsx b/components/Typography/index.tsx deleted file mode 100644 index b9babc0..0000000 --- a/components/Typography/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -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; - diff --git a/components/Typography/typo.module.scss b/components/Typography/typo.module.scss deleted file mode 100644 index 934333d..0000000 --- a/components/Typography/typo.module.scss +++ /dev/null @@ -1,64 +0,0 @@ -.typo-h1 { - font-size: 2.8rem; - font-weight: 300; - line-height: 1.167; - letter-spacing: -0.01562em; - // margin-top: 1.0rem; - // margin-bottom: 1rem; - - padding-bottom: 0.4rem; - border-bottom: 0.12rem solid rgb(53, 53, 53); -} - -.typo-h2 { - font-size: 2.3rem; - font-weight: 300; - line-height: 1.2; - letter-spacing: -0.00833em; - - // margin-top: 1.6rem; - // margin-bottom: 0.8rem; -} - -.typo-h3 { - font-size: 1.3rem; - font-weight: 400; - line-height: 1.167; - letter-spacing: 0em; - - // margin-top: 1.3rem; - // margin-bottom: 0.5rem; -} - -.typo-h4 { - font-size: 1.25rem; -} - -.typo-h5 { - font-size: 1.15rem; -} - -.typo-h6 { - font-size: 1.10rem; -} - -.typo-h4, .typo-h5, .typo-h6 { - // margin-top: 0.8rem; - // margin-bottom: 0.6rem; -} - -.typo-p { - font-size: 1rem; - letter-spacing: 0.00938em; - font-weight: 300; -} - -.typo-p { - font-size: 1rem; - line-height: 1.5; - // margin-bottom: 1em; -} - -.typo-gutter { - margin-bottom: 0.35em; -} |