add docs for typography component

Author: AlSirang

config/components.ts

@@ -18,6 +18,10 @@ export const componentConfig = {
       name: "card",
       filePath: "packages/ui/Cards/Card.tsx",
     },
+    typography: {
+      name: "typography",
+      filePath: "packages/ui/Typography/Typography.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -103,6 +107,11 @@ export const componentConfig = {
         () => import("@/preview/components/textarea-style-default")
       ),
     },
+    "typography-examples": {
+      name: "typography-examples",
+      filePath: "preview/components/typography-examples.tsx",
+      preview: lazy(() => import("@/preview/components/typography-examples")),
+    },
     "typography-headings": {
       name: "typography-headings",
       filePath: "preview/components/typography-headings.tsx",

content/docs/components/typography.mdx

@@ -1,21 +1,62 @@
 ---
 title: Typography
 description: Show your texts in different styles. 💅
-lastUpdated: 7 Oct, 2024
+lastUpdated: 22 Oct, 2024
 ---
 
 ## Headings
-<hr/>
-<br/>
+
+The `Typography` component is a versatile React component that provides various heading styles. It leverages class-variance-authority for managing variants and allows for the customization of heading elements.
+
+<hr />
+<br />
 
 <ComponentShowcase name="typography-headings" />
+<br />
+
+#### Props
+
+`className`: Additional CSS classes to customize the component's styling.
+
+<br />
+
+`component`: Specifies which heading element to render (default is `"h1"`).
+
+<br />
+
+`variant`: Determines the typography style. Default is `"h1"`. Variants include:
+
+- `"h1", "h2", "h3", "h4", "h5", "h6"`
 
-<br/>
-<br/>
-<br/>
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```bash
+npm install class-variance-authority
+```
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="typography" />
+
+<br />
+<br />
+## Examples
+
+<ComponentShowcase name="typography-examples" />
+
+<br />
+<br />
+<br />
 
 ## Paragraph
-<hr/>
-<br/>
+
+<hr />
+<br />
 
 <ComponentShowcase name="typography-p" />
+```

packages/ui/Typography/Typography.tsx

@@ -1,6 +1,6 @@
-import { cn } from "@/lib/utils";
-import { type VariantProps, cva } from "class-variance-authority";
 import type { HTMLAttributes } from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const typographyVariants = cva("font-head", {
   variants: {

preview/components/typography-examples.tsx

@@ -0,0 +1,17 @@
+import { Typography } from "@/packages/ui";
+
+export default function TypographyExamples() {
+  return (
+    <div className="space-y-4">
+      <Typography variant="h3">
+        Creating an `h1` Element with `h3` Styles.
+      </Typography>
+      <Typography variant="h5" component="h4">
+        Creating an `h4` Element with `h5` Styles.
+      </Typography>
+      <Typography component="h6" variant="h6">
+        Creating an `h6` Element with `h6` Styles.
+      </Typography>
+    </div>
+  );
+}

preview/components/typography-headings.tsx

@@ -1,12 +1,24 @@
+import { Typography } from "@/packages/ui";
+
 export default function TypographyHeadings() {
   return (
     <div className="space-y-4">
-      <h1 className="font-head text-5xl lg:text-6xl font-bold">This is H1</h1>
-      <h2 className="font-head text-4xl font-semibold">This is H2</h2>
-      <h3 className="font-head text-2xl font-semibold">This is H3</h3>
-      <h4 className="font-head text-xl font-medium">This is H4</h4>
-      <h5 className="font-head text-lg font-medium">This is H5</h5>
-      <h6 className="font-head font-medium">This is H6</h6>
+      <Typography>This is H1</Typography>
+      <Typography variant="h2" component="h2">
+        This is H2
+      </Typography>
+      <Typography variant="h3" component="h3">
+        This is H3
+      </Typography>
+      <Typography variant="h4" component="h4">
+        This is H4
+      </Typography>
+      <Typography variant="h5" component="h5">
+        This is H5
+      </Typography>
+      <Typography variant="h6" component="h6">
+        This is H6
+      </Typography>
     </div>
   );
 }