RecordRow.astro (1725B)
1 --- 2 import Icon from './Icon.astro'; 3 4 interface Props { 5 href: string; 6 /** Zero-padded index, supplied by the list so a row never has to know 7 * where it sits. */ 8 n: string; 9 title: string; 10 /** The kind mark — the domain tag for a sheet, the topic for a payload. */ 11 kind: string; 12 kindIcon?: string; 13 accent?: string; 14 /** Trailing slot: date / page count. Dropped below md. */ 15 meta?: string; 16 /** Disclosure detail, revealed on hover/focus. */ 17 excerpt?: string; 18 tagline?: string; 19 /** Client-side filter bucket (index page). */ 20 bucket?: string; 21 } 22 const { href, n, title, kind, kindIcon = 'doc', accent = 'foam', meta, excerpt, tagline, bucket } = Astro.props; 23 24 /** 25 * One record in an index — the site's core object, ported from the main 26 * site's RecordRow. One line, not a card: the title is NOT a display heading, 27 * so a list of fifty stays scannable. 28 * 29 * Rule #6 of the redesign handoff: the hover is a PAPER wash (`--overlay`), 30 * not the solid ink wipe — the title must stay ≥4.5:1 on hover — so nothing 31 * here re-colours the text on hover. See `.rec` in daemon.css. 32 */ 33 --- 34 <a class="rec" href={href} style={`--acc: var(--${accent});`} data-bucket={bucket}> 35 <span class="rec__grid"> 36 <span class="rec__n">{n}</span> 37 <span class="rec__kind"><Icon name={kindIcon} /> {kind}</span> 38 <span class="rec__title">{title}</span> 39 <span class="rec__date">{meta}</span> 40 <span class="rec__arrow"><Icon name="chevron" /></span> 41 {(excerpt || tagline) && ( 42 <span class="rec__reveal"><span> 43 {excerpt && <span class="rec__excerpt">{excerpt}</span>} 44 {tagline && <span class="rec__tagline">{tagline}</span>} 45 </span></span> 46 )} 47 </span> 48 </a>