Market index card with 4 tabs, S&P 500, Dow 30, Nasdaq and Russell 2K, and a 1D, 5D and 1M switch. The line is measured against its baseline, the previous close on 1D, it's green above the dashed rule and red below it, and the move up top is worked out from the same numbers. Scrub it or use the arrow keys and the price follows the cursor while the rest of the line dims. indices and ranges are props. Light and dark via shadcn theme tokens, respects reduced motion. More dark, data-dense components at https://www.ssych.com/library?ref=21st.dev
import { useEffect } from "react"
import IndexCard, { type IndexQuote, type IndexSeries } from "@/components/ui/index-card"
/* Deterministic sample data: each series is a seeded walk pinned to start at its
opening price and end exactly at the close, so every figure on the card can be
recomputed from the numbers below. */
const rng = (seed: number) => () => (seed = (seed * 48271) % 2147483647) / 2147483647
function walk(seed: number, n: number, from: number, to: number, vol: number) {
const r = rng(seed)
const w = [0]
for (let i = 1; i < n; i++) w.push(w[i - 1] + (r() - 0.5))
const last = w[n - 1]
return w.map((x, i) => {
const t = i / (n - 1)
return Math.round((from + (to - from) * t + (x - last * t) * vol) * 100) / 100
})
}
const clock = (m: number) => {
const h = Math.floor(m / 60)
return `${((h + 11) % 12) + 1}:${String(m % 60).padStart(2, "0")} ${h < 12 ? "AM" : "PM"}`
}
/** 9:30 AM to 4:00 PM in 5-minute steps: 79 samples */
const DAY = Array.from({ length: 79 }, (_, i) => clock(570 + i * 5))
/** five sessions in 30-minute steps */
const WEEK = ["Mon", "Tue", "Wed", "Thu", "Fri"].flatMap((d, di) =>
Array.from({ length: di === 4 ? 14 : 13 }, (_, i) => `${d} ${clock(570 + i * 30)}`)
)
/** the trading days of August 2024 */
const MONTH = Array.from({ length: 31 }, (_, i) => new Date(Date.UTC(2024, 7, i + 1)))
.filter((d) => d.getUTCDay() % 6 !== 0)
.map((d) => `Aug ${d.getUTCDate()}`)
function quote(
label: string,
note: string,
seed: number,
close: number,
prevClose: number,
open: number,
weekAgo: number,
monthAgo: number
): IndexQuote {
const vol = close * 0.0016
const series: Record<string, IndexSeries> = {
"1D": { values: walk(seed, DAY.length, open, close, vol), labels: DAY, baseline: prevClose, baselineLabel: "Prev close" },
"5D": { values: walk(seed + 7, WEEK.length, weekAgo, close, vol * 1.6), labels: WEEK, baseline: weekAgo, baselineLabel: "5 days ago" },
"1M": { values: walk(seed + 13, MONTH.length, monthAgo, close, vol * 2.4), labels: MONTH, baseline: monthAgo, baselineLabel: "Jul 31 close" },
}
return { label, note, series }
}
const INDICES: IndexQuote[] = [
quote("S&P 500", "Broad strength into the close; breadth improved with 8 of 11 sectors green, led by industrials and financials.", 5, 5648.4, 5584.43, 5601.15, 5634.61, 5522.3),
quote("Dow 30", "Blue chips ground higher through the session, helped by a soft-landing read on the latest inflation print.", 31, 41563.08, 41335.05, 41360.2, 41175.08, 40842.79),
quote("Nasdaq", "Megacap tech carried the tape; semis rebounded from early weakness to finish near session highs.", 77, 17713.62, 17516.43, 17488.9, 17877.79, 17599.4),
quote("Russell 2K", "The Michigan consumer sentiment index reported a notable upturn, the first rise after five months of stagnant readings.", 111, 2178.52, 2164.42, 2151.3, 2218.21, 2254.48),
]
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="flex min-h-[360px] w-full items-center justify-center p-6">
<IndexCard indices={INDICES} defaultIndex={3} />
</div>
)
}
Part of ssych ui — browse the full library on 21st.dev.