35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import React, { ReactNode, HTMLAttributes } from 'react';
|
|
import { Stack } from './Stack';
|
|
|
|
interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
children: ReactNode;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
icon?: ReactNode;
|
|
}
|
|
|
|
export function Heading({ level, children, className = '', style, icon, ...props }: HeadingProps) {
|
|
const Tag = `h${level}` as 'h1';
|
|
|
|
const levelClasses = {
|
|
1: 'text-3xl md:text-4xl font-bold text-white',
|
|
2: 'text-xl font-semibold text-white',
|
|
3: 'text-lg font-semibold text-white',
|
|
4: 'text-base font-semibold text-white',
|
|
5: 'text-sm font-semibold text-white',
|
|
6: 'text-xs font-semibold text-white',
|
|
};
|
|
|
|
const classes = [levelClasses[level], className].filter(Boolean).join(' ');
|
|
|
|
const content = icon ? (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
{icon}
|
|
{children}
|
|
</Stack>
|
|
) : children;
|
|
|
|
return <Tag className={classes} style={style} {...props}>{content}</Tag>;
|
|
}
|