diff --git a/applications/launchpad_v2/src/components/Text/index.tsx b/applications/launchpad_v2/src/components/Text/index.tsx new file mode 100644 index 0000000000..946e1d3578 --- /dev/null +++ b/applications/launchpad_v2/src/components/Text/index.tsx @@ -0,0 +1,55 @@ +import { createGlobalStyle } from 'styled-components' + +import { AvenirRegular, AvenirMedium, AvenirHeavy } from '../../assets/fonts/fonts' + +import { TextProps } from './types' + +import styles from '../../styles/styles' + +/** + * Global style rule to make fonts files accessible + */ +const GlobalFonts = createGlobalStyle` + @font-face { + src: url(${AvenirRegular}); + font-family: 'AvenirRegular' + } + @font-face { + src: url(${AvenirMedium}); + font-family: 'AvenirMedium' + } + @font-face { + src: url(${AvenirHeavy}); + font-family: 'AvenirHeavy' + } +` +/** + * @name Text + * + * @typedef TextProps + * @prop {'header' | 'subheader' | 'defaultHeavy' | 'defaultMedium' | 'defaultUnder' | 'smallHeavy' | 'smallMedium' | 'smallUnder' | 'microHeavy' | 'microRegular' | 'microOblique' } type - text styles + * @prop {ReactNode} children - text content to display + * @prop {string} [color] - font color + * + * @example + * ...text goes here... + */ + +const Text = ({ + type, + color, + children, +}: TextProps) => { + const textStyles = { + color: color, + ...styles.typography[type] + } + return ( + <> + +

{children}

+ + ) +} + +export default Text diff --git a/applications/launchpad_v2/src/components/Text/types.ts b/applications/launchpad_v2/src/components/Text/types.ts new file mode 100644 index 0000000000..17cd2652eb --- /dev/null +++ b/applications/launchpad_v2/src/components/Text/types.ts @@ -0,0 +1,27 @@ +import { ReactNode } from 'react' + +/** + * @typedef TextProps + * @prop {'header' | 'subheader' | 'defaultHeavy' | 'defaultMedium' | 'defaultUnder' | 'smallHeavy' | 'smallMedium' | 'smallUnder' | 'microHeavy' | 'microRegular' | 'microOblique' } type - text styles + * @prop {ReactNode} children - text content to display + * @prop {string} [color] - font color + */ + +export interface TextProps { + type: + | 'header' + | 'subheader' + | 'defaultHeavy' + | 'defaultMedium' + | 'defaultUnder' + | 'smallHeavy' + | 'smallMedium' + | 'smallUnder' + | 'microHeavy' + | 'microRegular' + | 'microOblique' + children: ReactNode + color?: string +} + +