26 lines
623 B
TypeScript
26 lines
623 B
TypeScript
import React, { ReactNode } from 'react';
|
|
|
|
interface HeadingProps {
|
|
level: 1 | 2 | 3;
|
|
children: ReactNode;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export default function Heading({ level, children, className = '', style }: HeadingProps) {
|
|
const baseStyles = 'font-bold tracking-tight';
|
|
|
|
const levelStyles = {
|
|
1: 'text-4xl sm:text-6xl',
|
|
2: 'text-3xl sm:text-4xl',
|
|
3: 'text-xl sm:text-2xl'
|
|
};
|
|
|
|
const Tag = `h${level}` as keyof JSX.IntrinsicElements;
|
|
|
|
return (
|
|
<Tag className={`${baseStyles} ${levelStyles[level]} ${className}`} style={style}>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
} |