46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { ComponentPropsWithoutRef, useEffect, useRef } from 'react'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
type Level = 2 | 3
|
|
|
|
interface HeadingProps extends Omit<ComponentPropsWithoutRef<'h2'>, 'children'> {
|
|
id: string
|
|
level?: Level
|
|
children: React.ReactNode
|
|
}
|
|
|
|
const levelStyles = {
|
|
2: { tag: 'h2', className: 'text-2xl font-semibold mb-4' },
|
|
3: { tag: 'h3', className: 'text-xl font-semibold mb-3' },
|
|
} as const
|
|
|
|
export function Heading({ id, level = 2, className, children, ...props }: HeadingProps) {
|
|
const ref = useRef<HTMLHeadingElement>(null)
|
|
const { tag: Tag, className: defaultClassName } = levelStyles[level]
|
|
|
|
useEffect(() => {
|
|
if (window.location.hash === `#${id}`) {
|
|
ref.current?.scrollIntoView({ behavior: 'smooth' })
|
|
}
|
|
}, [id])
|
|
|
|
return (
|
|
<Tag
|
|
ref={ref}
|
|
id={id}
|
|
className={cn('group relative scroll-mt-20', defaultClassName, className)}
|
|
{...props}
|
|
>
|
|
<a
|
|
href={`#${id}`}
|
|
className="absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-blue-500 transition-opacity no-underline"
|
|
aria-label={`Link to ${id}`}
|
|
>
|
|
#
|
|
</a>
|
|
{children}
|
|
</Tag>
|
|
)
|
|
}
|