summaryrefslogtreecommitdiff
path: root/frontend/components/prism/TickerHeader.tsx
diff options
context:
space:
mode:
authorTyler Hoang <tyler@tylerhoang.xyz>2026-06-29 01:41:22 -0700
committerTyler Hoang <tyler@tylerhoang.xyz>2026-06-29 01:41:22 -0700
commitdfec7587305fee59f8304000994ca16a495f7389 (patch)
treeb249367a7db0cf1d781f5401fddbd91ec61ba28f /frontend/components/prism/TickerHeader.tsx
parent2525596329ce57d01b012a18b0505b05fa8011d7 (diff)
feat: update financial overview components
Diffstat (limited to 'frontend/components/prism/TickerHeader.tsx')
-rw-r--r--frontend/components/prism/TickerHeader.tsx14
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"}