Add Heading component

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>
+    )
+}

mdx-components.tsx

@@ -1,7 +1,5 @@
-// @ts-nocheck
 import type {MDXComponents} from 'mdx/types'
-import {createSlug} from './lib/createSlug'
+import {Heading} from './components/ui/Heading'
-import Link from 'next/link'
 
 // 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: ({children}) => <Heading as='h2'>{children}</Heading>,
-            <h2 id={createSlug(children.toString())}
+        h3: ({children}) => <Heading as='h3'>{children}</Heading>,
-                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>,
         // Allows customizing built-in components, e.g. to add styling.
         // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
         ...components,