// Shell: TopNav, PageShell, Icons, shared UI atoms
// -------------------------------------------------------
const Icon = ({ name, size = 20, color = "currentColor", stroke = 1.75 }) => {
const paths = {
menu: <>,
search: <>,
user: <>,
bell: <>,
chevronR: <>,
chevronL: <>,
chevronD: <>,
play: <>,
pause: <>,
cc: <>,
volume: <>,
sparkle: <>,
check: <>,
x: <>,
mic: <>,
volume2: <>,
send: <>,
book: <>,
calendar: <>,
award: <>,
briefcase: <>,
text: <>,
eye: <>,
ear: <>,
brain: <>,
puzzle: <>,
home: <>,
help: <>,
filter: <>,
clock: <>,
users: <>,
refresh: <>,
alert: <>,
sliders: <>,
download: <>,
arrowR: <>,
shield: <>,
image: <>,
star: <>,
};
const p = paths[name];
if (!p) return null;
return (
);
};
// Feature badge (non-stigmatizing) — describes what the course HAS, not who it's for
const FeatureBadge = ({ type, size = 14 }) => {
const map = {
tts: { label: "語音服務", color: "#1f4a7a", bg: "#e0ebf6", icon: "volume" },
caption: { label: "字幕逐字稿", color: "#0d6b88", bg: "#def0f5", icon: "cc" },
easy: { label: "易讀版", color: "#8b5a0b", bg: "#fbf0d8", icon: "book" },
multi: { label: "多感官學習", color: "#5b3db5", bg: "#ece7f7", icon: "puzzle" },
sign: { label: "手語輔助", color: "#8b2555", bg: "#fae3ec", icon: "users" },
keyboard: { label: "全鍵盤操作", color: "#2d5f2d", bg: "#e3efe0", icon: "sliders" },
};
const d = map[type];
if (!d) return null;
return (
{d.label}
);
};
// Legacy disability badge kept for backward-compat but not used in course cards
const DisabilityBadge = ({ type, size = 14 }) => {
const map = {
VI: { label: "視障", color: "#5b3db5", bg: "#ece7f7", icon: "eye" },
HI: { label: "聽障", color: "#0d6b88", bg: "#def0f5", icon: "ear" },
CI: { label: "認知障礙", color: "#8b5a0b", bg: "#fbf0d8", icon: "puzzle" },
LD: { label: "學習障礙", color: "#8b2555", bg: "#fae3ec", icon: "brain" },
};
const d = map[type];
if (!d) return null;
return (
{d.label}
);
};
const Button = ({ children, variant = "primary", size = "md", onClick, icon, disabled, style = {}, type = "button" }) => {
const sizes = {
sm: { padding: "6px 12px", fontSize: "var(--fs-sm)", gap: 6, minHeight: 32 },
md: { padding: "10px 18px", fontSize: "var(--fs-base)", gap: 8, minHeight: 44 },
lg: { padding: "14px 24px", fontSize: "var(--fs-lg)", gap: 10, minHeight: 52 },
};
const variants = {
primary: { background: "var(--brand)", color: "#fff", border: "1.5px solid var(--brand)" },
secondary: { background: "#fff", color: "var(--brand)", border: "1.5px solid var(--brand)" },
ghost: { background: "transparent", color: "var(--ink-2)", border: "1.5px solid var(--border-strong)" },
accent: { background: "var(--accent)", color: "#fff", border: "1.5px solid var(--accent)" },
danger: { background: "#fff", color: "var(--danger)", border: "1.5px solid var(--danger)" },
};
const [hover, setHover] = React.useState(false);
return (
);
};
// Tag — 狀態徽章（WCAG 1.4.1：不只靠顏色傳達資訊，每個狀態都有獨特形狀 + 圖示）
const Tag = ({ children, color = "ink", style = {}, icon, shape }) => {
// status colors have explicit shapes (border style + icon) so colorblind users can distinguish
const colors = {
ink: { bg: "var(--bg-2)", fg: "var(--ink-2)", border: "1px solid var(--border-strong)", icon: null, radius: 6 },
brand: { bg: "var(--brand-100)", fg: "var(--brand-600)", border: "1px solid var(--brand)", icon: null, radius: 6 },
accent: { bg: "var(--accent-100)",fg: "var(--accent-600)", border: "1px solid var(--accent)", icon: null, radius: 999 },
ok: { bg: "var(--ok-100)", fg: "var(--ok)", border: "1.5px solid var(--ok)", icon: "check", radius: 6 },
warn: { bg: "var(--warn-100)", fg: "var(--warn)", border: "1.5px dashed var(--warn)", icon: "alert", radius: 2 },
danger: { bg: "var(--danger-100)",fg: "var(--danger)", border: "2px solid var(--danger)", icon: "x", radius: 2 },
};
const c = colors[color] || colors.ink;
const iconToRender = icon === false ? null : (icon || c.icon);
return (
{iconToRender && }
{children}
);
};
const Card = ({ children, style = {}, hover = false, onClick }) => {
const [h, setH] = React.useState(false);
return (
setH(true)}
onMouseLeave={() => setH(false)}
style={{
background: "var(--paper)",
border: "1px solid var(--border)",
borderRadius: "var(--radius)",
boxShadow: hover && h ? "var(--shadow)" : "var(--shadow-sm)",
transform: hover && h ? "translateY(-2px)" : "none",
transition: "all 180ms ease",
cursor: onClick ? "pointer" : "default",
...style,
}}
>
{children}
);
};
// Top navigation
const TopNav = ({ page, setPage, user, onOpenAI, notificationCount = 2 }) => {
const { profile, toggleFlag } = useA11y();
const ttsOn = !!profile.flags?.tts_default;
const links = [
{ id: "home", label: "首頁" },
{ id: "catalog", label: "課程總覽" },
{ id: "events", label: "活動與同步教學" },
{ id: "dashboard", label: "我的學習" },
];
return (
);
};
const IconBtn = ({ name, label, badge, onClick }) => (
);
// Footer
const Footer = () => (
);
const FooterCol = ({ title, items }) => (
{title}
{items.map(i => (
-
{i}
))}
);
// Page container
const Page = ({ children, screen, title, summary }) => {
// 自動朗讀頁面標題（聽覺優先模式 / tts_default flag 開啟時）
usePageAutoAnnounce(title || screen, summary);
return (
{children}
);
};
// Section header
const SectionHeader = ({ eyebrow, title, desc, action }) => (
{eyebrow && (
{eyebrow}
)}
{title}
{desc &&
{desc}
}
{action}
);
Object.assign(window, {
Icon, DisabilityBadge, FeatureBadge, Button, Tag, Card, IconBtn, TopNav, Footer, Page, SectionHeader, FooterCol,
});