/* ========================================================= CardPreviewStrip.jsx — Homepage card · top "data preview" --------------------------------------------------------- Inline-SVG mini visualizations that sit at the top of CaseCard / InsightCard. NOT decoration — each strip is a de-identified data hook tied to the case / article it precedes. Strict brand discipline: · pure SVG, no images, no canvas · navy + cyan only (no per-strip color carve-out) · 130px tall, full-card width, square top corners (parent card has overflow:hidden + border-radius) · monospace micro-label top-right, italic muted · no animation, no shadows, no gradients Usage: Supported kinds (image-add pass 2): case-timeline-11wk case-passrate-38 case-deltabars-42-18 insight-bars-nmpa insight-funnel-bridge insight-bilingual-pair Unknown kinds render an empty placeholder strip (no crash). ========================================================= */ (function () { /* Shared strip frame ------------------------------------------------ */ function Strip({ children, label }) { return (
{label && ( )} {children}
); } /* ============== Case 1 — 11-week phase timeline ================== */ function CaseTimeline11wk() { const phases = [ { label: 'Intake', weeks: 1 }, { label: 'Translation', weeks: 3 }, { label: 'PITL review', weeks: 4 }, { label: 'NMPA submit', weeks: 3 }, ]; const total = phases.reduce((s, p) => s + p.weeks, 0); const W = 100, H = 22; // logical % units let cursor = 0; return (
`${p.weeks}fr`).join(' '), gap: 4, fontFamily: 'var(--font-ui)', fontSize: 10.5, color: 'var(--fg-2)', }}> {phases.map((p, i) => (
{p.label}
{p.weeks} wk
))}
0 RFIs · first submission
 ); } /* ============== Case 2 — 38 artifacts · QC pass grid ============= */ function CasePassrate38() { const total = 38; const cols = 13, rows = 3; const cells = []; // Mark dot 18 (arbitrary, deterministic) as "needed minor revision" — 1 of 38 ≈ 97.4% // Spec says 96% pass; we visualize the 38-artifact grid + a narrow QC bar. for (let i = 0; i < total; i++) cells.push({ i, miss: i === 17 }); return (
{cells.map((c) => (
96%
QC first-pass
); } /* ============== Case 3 — 42 → 18 days delta bars ================= */ function CaseDeltaBars() { const before = 42, after = 18, max = 50; const W = 220, BH = 18, GAP = 12; const bw = (v) => (v / max) * W; return ( ); } /* ============== Insight 1 — top 5 NMPA-flagged sections =========== */ function InsightBarsNMPA() { const rows = [ { label: 'Endpoint definition', pct: 78 }, { label: 'Statistical analysis plan', pct: 65 }, { label: 'Safety profile sign-off', pct: 52 }, { label: 'Sample-size justification', pct: 40 }, { label: 'Inclusion criteria', pct: 25 }, ]; return (
{rows.map((r, i) => (
{r.label}
{r.pct}%
))}
); } /* ============== Insight 2 — China → FDA bridge funnel ============= */ function InsightFunnelBridge() { const steps = [ { label: 'China registry · all cases', pct: 100 }, { label: 'Endpoint maps to FDA', pct: 73 }, { label: 'Acceptable as supportive', pct: 58 }, ]; return (
{steps.map((s, i) => (
{s.label} {s.pct}%
))}
); } /* ============== Insight 3 — bilingual parity =================== */ function InsightBilingualPair() { return (
{/* Chinese line */}
CN 评审委员会已批准 · PITL 复核签字
{/* dotted divider with arrow */}
↔ both compliant
{/* English line */}
EN Approved by review board · PITL signed
); } /* ----- Dispatcher ---------------------------------------------- */ function CardPreviewStrip({ kind }) { switch (kind) { case 'case-timeline-11wk': return ; case 'case-passrate-38': return ; case 'case-deltabars-42-18': return ; case 'insight-bars-nmpa': return ; case 'insight-funnel-bridge': return ; case 'insight-bilingual-pair': return ; default: // Unknown kind — render an empty strip so the card layout stays stable. return ; } } if (typeof window !== 'undefined') { window.CardPreviewStrip = CardPreviewStrip; } })();