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 (
+
+ {children}
+ #
+
+ )
+}
\ 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}) =>
-
{children}
- #
,
+ h2: ({children}) => {children},
+ h3: ({children}) => {children},
// Allows customizing built-in components, e.g. to add styling.
// h1: ({ children }) =>