Motivation
Seven pages share the same pattern: fetch content from the StaticPageContent API and render it. Building them all at once avoids repetition and creates a reusable pattern.
Deliverables
- Create a reusable
StaticPage component (src/components/StaticPage.tsx) that accepts a slug prop, fetches content from getStaticPage(slug), and renders the title and body
- Wire these pages to use the component:
/legislation/rules → slug: "senate-rules"/legislation/disclosure → slug: "public-disclosure"/about/powers → slug: "powers-of-senate"/about/bill-process → slug: "how-a-bill-becomes-law"/elections → slug: "elections"/funding/apply → slug: "how-to-apply"/funding/budget-process → slug: "budget-process"
- Handle loading and error states
- Render body as HTML (use
dangerouslySetInnerHTML with a note to add sanitization later)
Important Notes
Motivation
Seven pages share the same pattern: fetch content from the StaticPageContent API and render it. Building them all at once avoids repetition and creates a reusable pattern.
Deliverables
StaticPagecomponent (src/components/StaticPage.tsx) that accepts aslugprop, fetches content fromgetStaticPage(slug), and renders the title and body/legislation/rules→ slug: "senate-rules"/legislation/disclosure→ slug: "public-disclosure"/about/powers→ slug: "powers-of-senate"/about/bill-process→ slug: "how-a-bill-becomes-law"/elections→ slug: "elections"/funding/apply→ slug: "how-to-apply"/funding/budget-process→ slug: "budget-process"dangerouslySetInnerHTMLwith a note to add sanitization later)Important Notes