📃 typography docs

Author: ariflogs

components/MDX.tsx

@@ -1,10 +1,12 @@
 import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
-import React from "react";
+import React, { HTMLAttributes } from "react";
 
 const components = {
   h1: H1,
-  h2: H2,
+  h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <H2 className="mb-2" {...props} />
+  ),
   h3: H3,
   h4: H4,
   h5: H5,

config/components.ts

@@ -81,14 +81,27 @@ export const componentConfig = {
     className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
 />`,
     },
-    "textarea-style-default": {
-      name: "textarea-style-default",
-      preview: lazy(() => import("@/preview/components/textarea-style-default")),
-      codeHtml: `<textarea
-    placeholder="Enter text..."
-    rows="4"
-    class="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
-/>`,
+    "typography-headings": {
+      name: "typography-headings",
+      preview: lazy(() => import("@/preview/components/typography-headings")),
+      codeHtml: `<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>
+</div>`,
+    },
+    "typography-p": {
+      name: "typography-p",
+      preview: lazy(() => import("@/preview/components/typography-p")),
+      codeHtml: `<p className="font-sans">
+  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,
+  doloremque inventore nesciunt quo sequi veniam impedit alias libero
+  dolorem tempore quia esse fugit fuga iste aliquam expedita molestias
+  iusto?
+</p>`,
     },
   },
 };

content/docs/components/typography.mdx

@@ -0,0 +1,23 @@
+---
+title: Typography
+description: Show your texts in different styles. 💅
+lastUpdated: 30 Sep, 2024
+---
+
+import {ComponentShowcase} from "@/components"
+
+## Headings
+<hr/>
+<br/>
+
+<ComponentShowcase name="typography-headings" />
+
+<br/>
+<br/>
+<br/>
+
+## Paragraph
+<hr/>
+<br/>
+
+<ComponentShowcase name="typography-p" />

preview/components/typography-headings.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+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>
+    </div>
+  );
+}

preview/components/typography-p.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function TypographyParagraph() {
+  return (
+    <p className="font-sans">
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,
+      doloremque inventore nesciunt quo sequi veniam impedit alias libero
+      dolorem tempore quia esse fugit fuga iste aliquam expedita molestias
+      iusto?
+    </p>
+  );
+}