SectionHeader.astro (1111B)
1 --- 2 interface Props { 3 eyebrow: string; 4 title: string; 5 intro?: string; 6 /** Heading + eyebrow colour — each section is keyed to a different accent. */ 7 tone?: 'ink' | 'pine' | 'iris' | 'love' | 'gold' | 'foam' | 'rose'; 8 class?: string; 9 } 10 const { eyebrow, title, intro, tone = 'ink', class: cls } = Astro.props; 11 12 /** 13 * The three-column header every archive section opens with — mono eyebrow, 14 * oversized display heading, short intro — ported from the main site's 15 * SectionHeader. The eyebrow takes the section's own accent rather than a 16 * neutral; the heading tone is keyed to the same. Stacks below the lg break. 17 */ 18 // The eyebrow always uses an accent (never bare ink); the title follows tone. 19 const eyebrowVar = tone === 'ink' ? 'var(--pine)' : `var(--${tone})`; 20 const titleVar = tone === 'ink' ? 'var(--text)' : `var(--${tone})`; 21 --- 22 <div class:list={['sec-head', cls]}> 23 <span class="sec-head__eyebrow" style={`--tone: ${eyebrowVar};`}>{eyebrow}</span> 24 <h2 class="sec-head__title" style={`--tone: ${titleVar};`}>{title}</h2> 25 {intro && <p class="sec-head__intro">{intro}</p>} 26 </div>