45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { cn } from './utils';
|
|
|
|
export function Heading({
|
|
level = 2,
|
|
children,
|
|
className,
|
|
subtitle,
|
|
align = 'left'
|
|
}: {
|
|
level?: 1 | 2 | 3 | 4;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
subtitle?: string;
|
|
align?: 'left' | 'center' | 'right';
|
|
}) {
|
|
const Tag = `h${level}` as any;
|
|
|
|
const sizes = {
|
|
1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]',
|
|
2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-tight',
|
|
3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
|
|
4: 'text-xl md:text-2xl font-bold',
|
|
};
|
|
|
|
const alignments = {
|
|
left: 'text-left',
|
|
center: 'text-center mx-auto',
|
|
right: 'text-right',
|
|
};
|
|
|
|
return (
|
|
<div className={cn('mb-8 md:mb-16 text-primary', alignments[align], className)}>
|
|
{subtitle && (
|
|
<span className="inline-block text-accent font-bold tracking-widest uppercase text-xs md:text-sm mb-3 md:mb-4 animate-fade-in">
|
|
{subtitle}
|
|
</span>
|
|
)}
|
|
<Tag className={cn(sizes[level as keyof typeof sizes])}>
|
|
{children}
|
|
</Tag>
|
|
</div>
|
|
);
|
|
}
|