// ============================================================================= // Article.jsx — shared renderer for long-form pages. // // Used by every /articles/*.html (Sun School) and by /privacy + /terms. // Each page supplies a plain data object; this file owns all the layout, so the // seven articles stay visually identical and there is one place to restyle. // // Block schema consumed by : // { t: 'p', html } paragraph (inline html allowed) // { t: 'lede', html } opening paragraph, larger // { t: 'h2', text, id } section heading // { t: 'h3', text } sub-heading // { t: 'ul'|'ol', items: [html] } list // { t: 'callout', title, html } bordered aside // { t: 'stats', items: [{ n, label }] } up-to-3 big numbers // { t: 'table', head: [], rows: [[]] } data table // { t: 'img', src, alt, caption } figure // ============================================================================= // Body copy carries inline /, so blocks render through // dangerouslySetInnerHTML. Every block is author-written and static — no user // input ever reaches this renderer. const raw = (html) => ({ __html: html }); const ArticleBody = ({ blocks }) => (
{blocks.map((b, i) => { switch (b.t) { case 'lede': return

; case 'p': return

; case 'h2': return

{b.text}

; case 'h3': return

{b.text}

; case 'ul': return
    {b.items.map((it, j) =>
  • )}
; case 'ol': return
    {b.items.map((it, j) =>
  1. )}
; case 'callout': return ( ); case 'stats': return (
{b.items.map((s, j) => (
{s.n}{s.label}
))}
); case 'table': return (
{b.head.map((h, j) => )} {b.rows.map((r, j) => ( {r.map((c, k) => ))}
{h}
)}
); case 'img': return (
{b.alt {b.caption && (
{b.caption}
)}
); default: return null; } })}
); // ── Hero ───────────────────────────────────────────────────────────────────── const ArticleHero = ({ meta }) => (
← Back to Sun School
{meta.tag} {meta.category}

{meta.title}

{meta.script && (
{meta.script}
)}
{meta.author} {meta.date} {meta.read} read
); // ── Medical disclaimer ─────────────────────────────────────────────────────── // Sun care sits next to health advice. Every article carries this so we never // read as a substitute for a dermatologist. const ArticleDisclaimer = () => (
General information, not medical advice.{' '} Hawaiian Style has made sun care since 1995, but we are not dermatologists. This article summarises published guidance from the sources listed below. If you have a skin condition, a burn that blisters, a mole that is changing, or you are treating a young child, please talk to a doctor.{' '} บทความนี้ให้ข้อมูลทั่วไป ไม่ใช่คำแนะนำทางการแพทย์ หากมีอาการผิดปกติ กรุณาปรึกษาแพทย์
); // ── Sources ────────────────────────────────────────────────────────────────── const ArticleSources = ({ sources }) => (

Sources

    {sources.map((s, i) => (
  1. {s.title} {s.pub && — {s.pub}}
    2. ))}
); // ── Next-up navigation ─────────────────────────────────────────────────────── const ArticleNext = ({ items }) => (
★ Keep reading
{items.map((a) => (
{a.tag}
{a.title}
{a.read} read →
 ))}
); // ── Whole-page composition ─────────────────────────────────────────────────── const ArticlePage = ({ meta, blocks, sources, next = [] }) => ( <>