diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-06-29 01:41:22 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-06-29 01:41:22 -0700 |
| commit | dfec7587305fee59f8304000994ca16a495f7389 (patch) | |
| tree | b249367a7db0cf1d781f5401fddbd91ec61ba28f /frontend/components/prism/TickerHeader.tsx | |
| parent | 2525596329ce57d01b012a18b0505b05fa8011d7 (diff) | |
feat: update financial overview components
Diffstat (limited to 'frontend/components/prism/TickerHeader.tsx')
| -rw-r--r-- | frontend/components/prism/TickerHeader.tsx | 14 |
1 files changed, 8 insertions, 6 deletions
diff --git a/frontend/components/prism/TickerHeader.tsx b/frontend/components/prism/TickerHeader.tsx index 804ffc0..c47f67f 100644 --- a/frontend/components/prism/TickerHeader.tsx +++ b/frontend/components/prism/TickerHeader.tsx @@ -1,6 +1,7 @@ import { deltaClass, fmtCurrency, fmtPct } from "@/lib/format"; import { rangePercent } from "@/lib/overview"; import type { TickerOverview } from "@/types/api"; +import { CurrencyWarning } from "./CurrencyWarning"; type Props = { overview: TickerOverview; @@ -25,15 +26,16 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) { <div className="psm-head-meta"> {overview.profile.exchange ? <span className="psm-tag">{overview.profile.exchange}</span> : null} {overview.meta.is_partial ? <span className="psm-partial-chip">Partial Data</span> : null} + <CurrencyWarning warning={overview.currency_warning} /> </div> </div> <div className="psm-range"> <div className="psm-eyebrow">52 Week Range</div> <div className="psm-range-values"> - <span>{fmtCurrency(overview.range_52w.low)}</span> - <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price)}</span> - <span>{fmtCurrency(overview.range_52w.high)}</span> + <span>{fmtCurrency(overview.range_52w.low, 2, overview.currency)}</span> + <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price, 2, overview.currency)}</span> + <span>{fmtCurrency(overview.range_52w.high, 2, overview.currency)}</span> </div> <div className="psm-range-rail" aria-hidden> {pct != null ? <span className="psm-range-indicator" style={{ left: `${pct}%` }} /> : null} @@ -42,11 +44,11 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) { </div> <div className="psm-price-stack"> - <span className="psm-price">{fmtCurrency(overview.quote.price)}</span> + <span className="psm-price">{fmtCurrency(overview.quote.price, 2, overview.currency)}</span> <span className={`psm-change ${deltaClass(overview.quote.change_pct)}`}> - {fmtCurrency(overview.quote.change)} · {fmtPct(overview.quote.change_pct, 2, true)} + {fmtCurrency(overview.quote.change, 2, overview.currency)} · {fmtPct(overview.quote.change_pct, 2, true)} </span> - <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close)}</span> + <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close, 2, overview.currency)}</span> {lastSource ? <span className="psm-quote-line">Source {lastSource.replaceAll("_", " ")}</span> : null} <button type="button" className={`psm-primary-action${isSaved ? " subtle" : ""}`} onClick={onToggleWatchlist}> {isSaved ? "Remove From Watchlist" : "Save To Watchlist"} |
