project-nomad/admin/inertia/components/markdoc/Heading.tsx
2025-12-23 16:00:33 -08:00

29 lines
567 B
TypeScript

import React, { JSX } from 'react'
export function Heading({
level,
id,
children,
}: {
level: number
id: string
children: React.ReactNode
}) {
const Component = `h${level}` as keyof JSX.IntrinsicElements
const sizes = {
1: 'text-3xl font-bold',
2: 'text-2xl font-semibold',
3: 'text-xl font-semibold',
4: 'text-lg font-semibold',
5: 'text-base font-semibold',
6: 'text-sm font-semibold',
}
return (
// @ts-ignore
<Component id={id} className={`${sizes[level]} mb-2 mt-6`}>
{children}
</Component>
)
}