From efbac85b5a782d108f2cdcdb6925331a5997e211 Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Thu, 19 Sep 2024 09:16:45 +0100
Subject: [PATCH] Add Heading component

---
 components/ui/Heading.tsx | 19 +++++++++++++++++++
 mdx-components.tsx        | 12 +++---------
 2 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 components/ui/Heading.tsx

diff --git a/components/ui/Heading.tsx b/components/ui/Heading.tsx
new file mode 100644
index 0000000..4537d8a
--- /dev/null
+++ b/components/ui/Heading.tsx
@@ -0,0 +1,19 @@
+// @ts-nocheck
+import {ElementType, ReactNode} from 'react'
+import {createSlug} from '@/lib/createSlug'
+import Link from 'next/link'
+
+type HeadingProps = {
+    as?: ElementType
+    children: ReactNode
+}
+
+export function Heading({as: Component = 'h1', children}: HeadingProps) {
+    return (
+        <Component id={createSlug(children.toString())} className='group'>
+            {children}
+            <Link className='ml-1 group-hover:opacity-100 opacity-0 transition-opacity ease-in'
+                  href={`#${createSlug(children.toString())}`}>#</Link>
+        </Component>
+    )
+}
\ No newline at end of file
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 38d3065..dfacdcd 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,7 +1,5 @@
-// @ts-nocheck
 import type {MDXComponents} from 'mdx/types'
-import {createSlug} from './lib/createSlug'
-import Link from 'next/link'
+import {Heading} from './components/ui/Heading'
 
 // This file allows you to provide custom React components
 // to be used in MDX files. You can import and use any
@@ -11,12 +9,8 @@ import Link from 'next/link'
 // This file is required to use MDX in `app` directory.
 export function useMDXComponents(components: MDXComponents): MDXComponents {
     return {
-        h2: ({children}) =>
-            <h2 id={createSlug(children.toString())}
-                className='group'>{children}
-                <Link className='ml-1 group-hover:opacity-100 opacity-0 transition-opacity ease-in'
-                      href={`#${createSlug(children.toString())}`}
-                      name="anchor">#</Link></h2>,
+        h2: ({children}) => <Heading as='h2'>{children}</Heading>,
+        h3: ({children}) => <Heading as='h3'>{children}</Heading>,
         // Allows customizing built-in components, e.g. to add styling.
         // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
         ...components,