v1.3 - added an sqlite db and built data structure

src/pages/Community.tsx

@@ -1,63 +1,69 @@
-import { useState } from "react";
-import PageShell from "../components/PageShell.jsx";
-import LocalChapters, { ChaptersViewToggle } from "./Chapters.jsx";
+import PageShell from "../components/PageShell.tsx";
+import { useSectionManifest } from "../lib/sections.tsx";
+import OrgListMap, { OrgMapToggle } from "./sections/OrgList-Map.tsx";
+import OrgListVertical from "./sections/OrgList-Vertical.tsx";
+import OrgListCards from "./sections/OrgList-Card.tsx";
 
-/* Section ids match the nav hashes: #local, #virtual, #partners.
-   `content` is whatever you want inside — cards, a list, plain
-   copy. The empty divs below are placeholders to build into. */
-const LOCAL_ACCENT = "#138ba0";
+/* ═══════════════════════════════════════════════════════════════
+   COMMUNITY PAGE
+
+   Two views of the organizations table. The map is filtered to
+   chapters; the vertical list is filtered to regions. Same rows,
+   same endpoint, different shape on the page.
+   ═══════════════════════════════════════════════════════════════ */
+
+const SECTIONS = [
+  {
+    id: "chapters",
+    title: "Local Chapters",
+    blurb:
+      "Young adult groups meeting in person and online across the movement.",
+    accent: "#138ba0",
+    background: "#eef9fb",
+    Component: OrgListMap,
+    views: { options: ["map", "grid"], default: "map", Toggle: OrgMapToggle },
+  },
+  {
+    id: "regions",
+    title: "Unity Regions",
+    blurb:
+      "The regional organizations that support chapters and host their own gatherings.",
+    accent: "#4a6b72",
+    background: "#ffffff",
+    Component: OrgListVertical,
+    props: {
+      kind: "region",
+      pageLabel: "Region page",
+      groupBy: org => org.details?.scope,
+      groups: [
+        { key: "domestic", title: "US Unity Regions" },
+        { key: "international", title: "International Unity Regions" },
+      ],
+    },
+  },
+  {
+    id: "partners",
+    title: "Partner Organizations",
+    blurb:
+      "Organizations we collaborate with across the Unity movement and beyond.",
+    accent: "#7a5ea8",
+    background: "#eef9fb",
+    Component: OrgListCards,
+    props: {
+      kind: "partner",
+      pageLabel: "Partner page",
+      empty: "· Partner organizations coming soon ·",
+    },
+  },
+];
 
 export default function CommunityPage() {
-  // Map or grid for the chapters section. Lives here so the toggle in
-  // the heading's action bar and the content below it stay in sync.
-  const [chaptersView, setChaptersView] = useState("map");
-
-  const sections = [
-    {
-      id: "local",
-      title: "Local Chapters",
-      blurb: "Groups meeting in person around the country. Find one near you.",
-      accent: LOCAL_ACCENT,
-      background: "#eef9fb",
-      actions: (
-        <ChaptersViewToggle
-          view={chaptersView}
-          setView={setChaptersView}
-          accent={LOCAL_ACCENT}
-        />
-      ),
-      content: <LocalChapters view={chaptersView} />,
-    },
-    {
-      id: "virtual",
-      title: "Virtual Community",
-      blurb: "Connect from anywhere, no chapter nearby required.",
-      accent: "#aac992",
-      background: "#ffffff",
-      content: (
-        <div className="max-w-6xl mx-auto px-6">
-          {/* Virtual community content */}
-        </div>
-      ),
-    },
-    {
-      id: "partners",
-      title: "Partner Organizations",
-      blurb: "Organizations we collaborate with across the Unity movement.",
-      accent: "#7a5ea8",
-      background: "#eef9fb",
-      content: (
-        <div className="max-w-6xl mx-auto px-6">
-          {/* Partner organizations content */}
-        </div>
-      ),
-    },
-  ];
+  const sections = useSectionManifest(SECTIONS);
 
   return (
     <PageShell
       title="Community"
-      intro="Ways to connect with Next Generation of Unity, in your area, online, and through the organizations we work alongside."
+      intro="Chapters, regions and the people who make up Next Generation of Unity."
       sections={sections}
     />
   );