From d67f3514eff4f45ad1ca84cde6465e622acd4dcc Mon Sep 17 00:00:00 2001 From: flu0r1ne Date: Thu, 7 Sep 2023 21:28:37 -0500 Subject: Scoped global styling to all markdown Make React compatible with markdown-style HTML by added components with identical styling to markdown. This is done while CSS scoping is maintained. Additional style is loaded through the markdown loader by injecting default-styling tags into the components. This allows default-margin to be added to these elements in addition to the styling found in the React elements. The homepage reflects the domain, as defined by an environmental variable. --- components/Typography/index.tsx | 47 ----------------------------------------- 1 file changed, 47 deletions(-) delete mode 100644 components/Typography/index.tsx (limited to 'components/Typography/index.tsx') 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 { - variant?: Variant; - align?: Align; - gutter?: boolean; -} - -const variantTagMap: Record = { - h1: 'h1', - h2: 'h2', - h3: 'h3', - h4: 'h4', - h5: 'h5', - h6: 'h6', - body: 'p' -}; - -const Typography: React.FC = ({ - 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 ; -}; - -export default Typography; - -- cgit v1.2.3