Typography component

apps/frontend/src/components/Header/Header.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Header } from './Header';
 
 const meta = {
-  title: 'Example/Header',
+  title: 'Header',
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
@@ -16,5 +16,4 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-
 export const DefaultHeader: Story = {};

apps/frontend/src/components/Typography/Heading.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Heading } from './Typography';
+
+const meta = {
+  title: 'Heading',
+  component: Heading,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const H1: Story = {
+  args: {
+    level: 'h1',
+    children: 'Heading h1',
+  },
+};
+export const H2: Story = {
+  args: {
+    level: 'h2',
+    children: 'Heading h2',
+  },
+};
+export const H3: Story = {
+  args: {
+    level: 'h3',
+    children: 'Heading h3',
+  },
+};
+export const H4: Story = {
+  args: {
+    level: 'h4',
+    children: 'Heading h4',
+  },
+};
+export const H5: Story = {
+  args: {
+    level: 'h5',
+    children: 'Heading h5',
+  },
+};

apps/frontend/src/components/Typography/Text.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Text } from './Typography';
+
+const meta = {
+  title: 'Text',
+  component: Text,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Paragraphs: Story = {
+  args: {
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dapibus vehicula tincidunt. Mauris vel dui purus. Vestibulum ultricies egestas scelerisque. Proin venenatis consequat pellentesque. Nunc porttitor vestibulum velit. Nunc nec eros sit amet nibh luctus mattis. Nulla facilisi. Aenean euismod purus mi, et tincidunt velit auctor vitae',
+  },
+};

apps/frontend/src/components/Typography/Typography.tsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx';
+
+export interface HeadingProps {
+  level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+  children: React.ReactNode;
+}
+const common = 'font-gellix';
+const h1 = 'text-6xl font-semibold leading-[4.25rem]';
+const h2 = 'text-5xl font-semibold leading-[3.5rem]';
+const h3 = 'text-4xl font-semibold leading-[2.75rem]';
+const h4 = 'text-3xl font-light';
+const h5 = 'text-2xl';
+
+export const Heading = ({ level, children }: HeadingProps) => {
+  const Tag = level;
+
+  return (
+    <Tag
+      className={clsx(common, {
+        [h1]: level === 'h1',
+        [h2]: level === 'h2',
+        [h3]: level === 'h3',
+        [h4]: level === 'h4',
+        [h5]: level === 'h5',
+      })}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+export interface TextProps {
+  size?: 'default' | 'small' | 'tiny';
+  weight?: 'regular' | 'bold';
+  children: React.ReactNode;
+}
+
+export const Text = ({ size = 'default', weight = 'regular', children }: TextProps) => {
+  return (
+    <p
+      className={clsx(common, {
+        'font-semibold': weight === 'bold',
+        'text-xl leading-6': size === 'default',
+        'text-sm leading-5': size === 'small',
+        'text-xs leading-4': size === 'tiny',
+      })}
+    >
+      {children}
+    </p>
+  );
+};