84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import PageShell from "../components/PageShell";
|
||
import HistoryTimeline from "./sections/history/HistoryTimeline";
|
||
import { HISTORY_DECADES } from "../data/historyDecades";
|
||
import { useHistory } from "../lib/useHistory";
|
||
|
||
/**
|
||
* Year the program starts. Decades ending before this render with the
|
||
* pre-program treatment, so the gap moves if the founding date is ever
|
||
* corrected — no hardcoded 2000 anywhere in the components.
|
||
*/
|
||
const PROGRAM_START_YEAR = 2000;
|
||
|
||
const ACCENT = "#138ba0";
|
||
const BACKGROUND = "#ffffff";
|
||
|
||
export default function History() {
|
||
const { items, loading, error, reload } = useHistory();
|
||
|
||
// Section renders `content` outside its own max-width wrapper, so the
|
||
// container lives here. The custom properties bind the timeline to
|
||
// this section's accent and background — --tl-surface must match
|
||
// `background` or the rail will show through the year dots.
|
||
const wrap = (children: React.ReactNode) => (
|
||
<div
|
||
className="max-w-6xl mx-auto px-6"
|
||
style={{ "--tl-accent": ACCENT, "--tl-surface": BACKGROUND } as React.CSSProperties}
|
||
>
|
||
{children}
|
||
</div>
|
||
);
|
||
|
||
let content: React.ReactNode;
|
||
|
||
if (loading) {
|
||
content = wrap(
|
||
<p className="py-12 text-[#4a6b72]" role="status">
|
||
Loading the timeline…
|
||
</p>,
|
||
);
|
||
} else if (error) {
|
||
// Say what failed and offer the one action that might fix it.
|
||
// A history page that silently renders nothing looks like an
|
||
// organization with no history.
|
||
content = wrap(
|
||
<div className="py-12">
|
||
<p className="text-[#b3261e]">Couldn’t load the timeline. {error}</p>
|
||
<button
|
||
type="button"
|
||
onClick={reload}
|
||
className="mt-3 rounded-full border border-[#138ba0] px-4 py-1.5 text-sm font-medium text-[#138ba0] transition-colors hover:bg-[#eef9fb]"
|
||
>
|
||
Try again
|
||
</button>
|
||
</div>,
|
||
);
|
||
} else {
|
||
content = wrap(
|
||
<HistoryTimeline
|
||
items={items}
|
||
decades={HISTORY_DECADES}
|
||
direction="desc"
|
||
programStartYear={PROGRAM_START_YEAR}
|
||
/>,
|
||
);
|
||
}
|
||
|
||
return (
|
||
<PageShell
|
||
title="History"
|
||
intro="A near-complete timeline of Next Generation of Unity (NGU), and other Unity Young Adult programs."
|
||
sections={[
|
||
{
|
||
id: "timeline",
|
||
title: "NGU Timeline",
|
||
blurb:
|
||
"Open a year to see what happened.",
|
||
accent: ACCENT,
|
||
background: BACKGROUND,
|
||
content,
|
||
},
|
||
]}
|
||
/>
|
||
);
|
||
}
|