portfolio/components/ui/Heading.tsx

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 = null}: HeadingProps) {
    let headingText = children ? children.toString() : ''

    return (
        <Component id={createSlug(headingText)} className="flex group">
            {children}
            <Link className="sr-only group-hover:not-sr-only !ml-1.5" href={`#${createSlug(headingText)}`}>#</Link>
        </Component>
    )
}