Add Heading component
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m34s

This commit is contained in:
Ryan Freeman 2024-09-19 09:16:45 +01:00
parent a8385c50d9
commit efbac85b5a
2 changed files with 22 additions and 9 deletions

19
components/ui/Heading.tsx Normal file
View File

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

View File

@ -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,