38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import OrnamentBloom from './OrnamentBloom';
|
|
|
|
export default function TitleBlock({
|
|
title, subtitle, color = '#1F2A44', subColor = '#6B6B6B',
|
|
center = true, withBloom = true, gold = '#D4AF37',
|
|
}) {
|
|
return (
|
|
<div style={{ textAlign: center ? 'center' : 'left' }}>
|
|
{withBloom && center && (
|
|
<div style={{
|
|
display: 'flex', justifyContent: 'center', gap: 12,
|
|
alignItems: 'center', marginBottom: 10, color: gold,
|
|
}}>
|
|
<svg width="40" height="6" viewBox="0 0 40 6">
|
|
<path d="M0 3 L36 3" stroke={gold} strokeWidth="1" />
|
|
<circle cx="38" cy="3" r="1.5" fill={gold} />
|
|
</svg>
|
|
<OrnamentBloom size={18} color={gold} />
|
|
<svg width="40" height="6" viewBox="0 0 40 6">
|
|
<circle cx="2" cy="3" r="1.5" fill={gold} />
|
|
<path d="M4 3 L40 3" stroke={gold} strokeWidth="1" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
<h1 className="font-title" style={{
|
|
margin: 0, fontSize: 30, color, letterSpacing: '-0.02em',
|
|
}}>{title}</h1>
|
|
{subtitle && (
|
|
<div style={{
|
|
marginTop: 6, fontSize: 13, color: subColor, lineHeight: 1.55,
|
|
letterSpacing: '-0.01em',
|
|
}}>{subtitle}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|