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
+ *
{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 +} + +