29 lines
837 B
TypeScript
29 lines
837 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 styles: Record<number, string> = {
|
|
1: 'text-3xl font-bold text-desert-green-darker pb-3 mb-6 mt-2 border-b-2 border-desert-orange',
|
|
2: 'text-2xl font-bold text-desert-green-dark pb-2 mb-5 mt-10 border-b border-desert-tan-lighter',
|
|
3: 'text-xl font-semibold text-desert-green-dark mb-3 mt-8',
|
|
4: 'text-lg font-semibold text-desert-green mb-2 mt-6',
|
|
5: 'text-base font-semibold text-desert-green mb-2 mt-5',
|
|
6: 'text-sm font-semibold text-desert-green mb-2 mt-4',
|
|
}
|
|
|
|
return (
|
|
// @ts-ignore
|
|
<Component id={id} className={styles[level]}>
|
|
{children}
|
|
</Component>
|
|
)
|
|
}
|