1import Link from 'next/link';2import type { IndexRow } from '@/lib/queries/indices';3import { fmtNum, cn } from '@/lib/format';4import { Delta } from '@/components/ui/primitives';56/** Live tape (§163): marquee of indices; indices without a published value show their build status. */7export function IndexTape({ indices, className }: { indices: IndexRow[]; className?: string }) {8 if (!indices.length) return null;9 const items = indices.map((i) => (10 <Link key={i.ticker} href={`/rareindex/${i.ticker}`} className="flex shrink-0 items-center gap-2 px-4 text-[12px] hover:bg-inset" style={{ borderLeft: `2px solid ${i.color ?? 'var(--ri-index)'}` }}>11 <span className="font-semibold tracking-wide text-fg">{i.ticker}</span>12 {i.latest ? (13 <>14 <span className="num text-muted">{fmtNum(i.latest.value, { digits: 2 })}</span>15 <Delta value={i.change1d} />16 </>17 ) : (18 <span className="text-subtle">19 building · {i.pricedAssets}/{i.minConstituents}20 </span>21 )}22 </Link>23 ));24 return (25 <div className={cn('relative overflow-hidden border-y border-border bg-elevated', className)} aria-label="Index tape">26 <div className="tape-track flex w-max py-1.5">27 {items}28 {items.map((it, k) => (29 <span key={`dup-${k}`} aria-hidden>30 {it}31 </span>32 ))}33 </div>34 </div>35 );36}37