返回 CodeWhale
status-badge.tsx
根目录 / web / components / status-badge.tsx
1 /**
2 * <StatusBadge> — honest availability labels for public surfaces.
3 *
4 * Used wherever the site shows something that is not a shipped, stable
5 * feature: experimental bridges, preview platforms, pending media, and
6 * unavailable states. The label is always visible text — never color alone —
7 * so the state is conveyed accessibly in both locales.
8 */
9
10 import type { LocalizedText } from "@/lib/content/vocabulary";
11
12 export type StatusKind = "experimental" | "preview" | "pending" | "unavailable";
13
14 const DEFAULT_LABELS: Record<StatusKind, LocalizedText> = {
15 experimental: { en: "Experimental", zh: "实验性" },
16 preview: { en: "Preview", zh: "预览" },
17 pending: { en: "Pending", zh: "待就绪" },
18 unavailable: { en: "Unavailable", zh: "暂不可用" },
19 };
20
21 export function StatusBadge({
22 kind,
23 locale = "en",
24 label,
25 }: {
26 kind: StatusKind;
27 locale?: string;
28 /** Overrides the default per-kind label (e.g. a media entry's pendingLabel). */
29 label?: LocalizedText;
30 }) {
31 const isZh = locale === "zh";
32 const text = label ? (isZh ? label.zh : label.en) : isZh ? DEFAULT_LABELS[kind].zh : DEFAULT_LABELS[kind].en;
33
34 return (
35 <span className={`status-badge status-badge-${kind}`}>
36 <span className="status-badge-dot" aria-hidden="true" />
37 {text}
38 </span>
39 );
40 }
41
41 lines Plain Text