// Shared components — phone shell, sparkline, header, etc.
// Loaded after data.js so window.PORTFOLIO / fmt are available.
const { useState, useMemo } = React;
// ─── Phone shell (no OS chrome — just the canvas; we're prototyping a web/PWA)
// On mobile (≤480px): fills the viewport, no border/shadow — feels like a native app.
// On desktop: shows as a centered 390×812 phone mock with shadow.
function Phone({ children, bg = 'var(--bg)' }) {
return (
{children}
);
}
// ─── Compact SVG sparkline
function Spark({ data, w = 60, h = 22, color, strokeWidth = 1.5 }) {
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const step = w / (data.length - 1);
const d = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${(i * step).toFixed(1)} ${(h - ((v - min) / range) * h).toFixed(1)}`).join(' ');
const up = data[data.length - 1] >= data[0];
const stroke = color || (up ? 'var(--up)' : 'var(--down)');
return (
);
}
// ─── Area sparkline (filled)
function SparkArea({ data, w = 100, h = 36, up }) {
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const step = w / (data.length - 1);
const pts = data.map((v, i) => [i * step, h - ((v - min) / range) * h]);
const line = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
const area = `${line} L ${w} ${h} L 0 ${h} Z`;
const isUp = up ?? (data[data.length - 1] >= data[0]);
const stroke = isUp ? 'var(--up)' : 'var(--down)';
const fill = isUp ? 'rgba(22,163,74,0.10)' : 'rgba(220,38,38,0.10)';
return (
);
}
// ─── Currency toggle pill (USD / TWD)
function CurrencyToggle({ value, onChange, size = 'sm' }) {
const pad = size === 'sm' ? '4px' : '5px';
const fs = size === 'sm' ? 11 : 12;
return (