1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import { PriceChart } from "@/components/PriceChart";
import type { HistoryPoint } from "@/types/api";
const PERIODS = [
{ key: "1m", label: "1M" },
{ key: "3m", label: "3M" },
{ key: "6m", label: "6M" },
{ key: "1y", label: "1Y" },
{ key: "5y", label: "5Y" }
];
type Props = {
symbol: string;
period: string;
points: HistoryPoint[];
chartState: "idle" | "loading" | "ready" | "error";
chartError: string | null;
onChangePeriod: (period: string) => void;
};
export function ChartCard({ symbol, period, points, chartState, chartError, onChangePeriod }: Props) {
return (
<section className="psm-card">
<div className="psm-card-head">
<div>
<div className="psm-eyebrow">Price Action</div>
<h2 className="psm-card-title">{symbol} Price History</h2>
</div>
<div className="psm-tabs" role="tablist" aria-label="Chart range">
{PERIODS.map((option) => (
<button
key={option.key}
type="button"
role="tab"
className={`psm-tab${period === option.key ? " active" : ""}`}
aria-selected={period === option.key}
onClick={() => onChangePeriod(option.key)}
>
{option.label}
</button>
))}
</div>
</div>
<p className="psm-chart-meta">Interactive history for the selected window. If history fails, the rest of Overview stays intact.</p>
<div className="psm-chart-frame">
{chartState === "loading" ? <div className="psm-card-empty">Loading {period.toUpperCase()} history…</div> : null}
{chartState === "error" ? <div className="psm-card-empty psm-error-copy">{chartError || "Could not load chart history."}</div> : null}
{chartState === "ready" ? <PriceChart symbol={symbol} points={points} /> : null}
</div>
</section>
);
}
|
