99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
/* ═══════════════════════════════════════════════════════════════
|
|
PAGE SHELL
|
|
Just the chrome that makes pages look alike: a page header, then
|
|
sections with a thin accent banner between them, alternating
|
|
backgrounds, and a left-aligned heading with a blurb and rule.
|
|
|
|
Whatever goes inside a section is passed as `content` — the shell
|
|
doesn't care what it is.
|
|
|
|
No <main> and no footer here — Layout provides both, so a page
|
|
using this shell drops straight into the router's Outlet.
|
|
|
|
Usage:
|
|
<PageShell
|
|
title="Community"
|
|
intro="One line under the page title."
|
|
sections={[
|
|
{
|
|
id: "local", // matches the nav hash, #local
|
|
|
|
title: "Local Chapters",
|
|
blurb: "Optional line under the section heading.",
|
|
accent: "#138ba0", // heading, banner, rule
|
|
background: "#eef9fb",
|
|
actions: <SomeButton />, // optional, right of the heading
|
|
content: <YourStuff />,
|
|
},
|
|
]}
|
|
/>
|
|
═══════════════════════════════════════════════════════════════ */
|
|
|
|
const TEAL = "#138ba0";
|
|
|
|
export function Section({ section }) {
|
|
const {
|
|
id,
|
|
title,
|
|
blurb,
|
|
accent,
|
|
background,
|
|
// Optional action bar for this section's heading row — a view
|
|
// toggle, a filter, a link. Whatever the section needs; the
|
|
// shell just gives it a place to sit.
|
|
actions,
|
|
content,
|
|
} = section;
|
|
|
|
return (
|
|
<section
|
|
id={id}
|
|
className="py-20"
|
|
style={{ background, scrollMarginTop: "5rem" }}
|
|
>
|
|
{/* Heading — left aligned, optional actions on the right */}
|
|
<div className="max-w-6xl mx-auto px-6 mb-10">
|
|
<div className="flex flex-wrap items-end justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-4xl md:text-5xl font-800" style={{ color: accent }}>
|
|
{title}
|
|
</h2>
|
|
{blurb && <p className="mt-2 text-[#4a6b72] max-w-xl">{blurb}</p>}
|
|
</div>
|
|
{actions}
|
|
</div>
|
|
<div className="mt-6 h-px w-full" style={{ background: accent, opacity: 0.35 }} />
|
|
</div>
|
|
|
|
{content}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default function PageShell({ title, intro, sections }) {
|
|
return (
|
|
<>
|
|
{/* Page header */}
|
|
<div className="pt-24 pb-12 px-6" style={{ background: "#eef9fb" }}>
|
|
<div className="max-w-6xl mx-auto">
|
|
<h1 className="text-5xl md:text-6xl font-800" style={{ color: TEAL }}>
|
|
{title}
|
|
</h1>
|
|
{intro && <p className="mt-3 text-lg text-[#4a6b72] max-w-2xl">{intro}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
{sections.map((section, i) => (
|
|
<div key={section.id}>
|
|
{/* Thin solid banner between sections */}
|
|
<div className="h-2" style={{ background: section.accent }} />
|
|
<Section section={section} />
|
|
{i === sections.length - 1 && (
|
|
<div className="h-2" style={{ background: section.accent }} />
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
</>
|
|
);
|
|
}
|