v1.5 - history and timeline as well as many datastructure updates added, polished, fixes

src/pages/History.tsx

@@ -0,0 +1,84 @@
+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,
+        },
+      ]}
+    />
+  );
+}