Callout.astro (896B)
1 --- 2 import Icon from './Icon.astro'; 3 4 interface Props { 5 tone?: 'note' | 'finding' | 'warning' | 'danger'; 6 /** Override the tone's default kind label. */ 7 label?: string; 8 } 9 const { tone = 'note', label } = Astro.props; 10 11 /** 12 * Flat plate, a 2px accent rule, mono eyebrow — the archive's callout, ported 13 * from the main site's Callout. Four tones, each with its own kind mark. 14 */ 15 const TONES = { 16 note: { color: 'var(--pine)', icon: 'info', label: 'Note' }, 17 finding: { color: 'var(--foam)', icon: 'check', label: 'Finding' }, 18 warning: { color: 'var(--gold)', icon: 'warn', label: 'Warning' }, 19 danger: { color: 'var(--love)', icon: 'close', label: 'Danger' }, 20 } as const; 21 const t = TONES[tone]; 22 --- 23 <div class="dcallout" style={`--tone: ${t.color};`}> 24 <div class="dcallout__label"><Icon name={t.icon} /> {label ?? t.label}</div> 25 <div class="dcallout__body"><slot /></div> 26 </div>