// shared.jsx — primitives: TopBar, Footer, Bilingual text, Numpad, Icons
const { useState, useEffect, useRef, useMemo } = React;
// ---- Tiny line icons ---------------------------------------------------------
const Icon = {
Arrow: (p) => ,
ArrowL: (p) => ,
Check: (p) => ,
Plus: (p) => ,
Clock: (p) => ,
Drop: (p) => ,
Pin: (p) => ,
Spark: (p) => ,
Wifi: (p) => ,
Battery: (p) => ,
Upload: (p) => ,
Camera: (p) => ,
Cal: (p) => ,
};
// ---- Bilingual text helper ---------------------------------------------------
function Bi({ en, tc, sep = " ", className = "" }) {
return (
{en}
{tc}
);
}
// ---- Status bar (iPad) -------------------------------------------------------
function StatusBar() {
return (
9:41 AM
Mobile Medical · Mong Kok Branch
);
}
// ---- Top bar with brand + bilingual progress --------------------------------
function TopBar({ stepIndex }) {
return (
Mobile Medical
美邦 · Body Check
{COPY.steps.map((s, i) => (
{i < stepIndex ? : (i + 1).toString().padStart(2, "0")}
{s.en}{s.tc}
{i < COPY.steps.length - 1 && }
))}
);
}
// ---- Footer with prev/next --------------------------------------------------
function PageFoot({ onBack, onNext, nextLabel, nextLabelTc, backLabel = "Back", backLabelTc = "返回", canNext = true, secondary = null, primaryWide = false }) {
return (
{onBack ? (
) : }
{secondary}
{onNext && (
)}
);
}
// ---- Numpad ------------------------------------------------------------------
function Numpad({ onKey, hkidMode = false }) {
const keys = hkidMode
? [["A","B","C"],["D","E","F"],["G","H","I"],["J","K","L"],["1","2","3"],["4","5","6"],["7","8","9"],["⌫","0","✓"]]
: [["1","2","3"],["4","5","6"],["7","8","9"],["⌫","0","✓"]];
return (
{keys.flat().map((k, i) => {
const isFn = k === "⌫" || k === "✓";
const isAlpha = /[A-Z]/.test(k);
return (
);
})}
);
}
Object.assign(window, { Icon, Bi, StatusBar, TopBar, PageFoot, Numpad });
