feat: add region title

Tuhura-Tech · May 6, 2024 · 7d69bda · 7d69bda
1 parent 5e193d5
commit 7d69bda
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git a/src/components/IconCards.astro b/src/components/IconCards.astro
@@ -1,21 +1,23 @@
 ---
 import { Icon } from "astro-icon/components";
+import { type Session } from "../data";
 
 interface Props {
-  cards: {
-    title: string;
-    description: string;
-    ages?: string;
-    date?: string;
-    type: string;
-    signupLink?: string;
-  }[];
+  cards: Session[];
+  location: string;
 }
-const { cards } = Astro.props;
+const { cards, location } = Astro.props;
 ---
 
 <!-- Icon Blocks -->
 <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+  <h1
+    class="block text-3xl font-bold text-gray-800 sm:text-4xl md:text-5xl lg:text-6xl dark:text-white"
+    id={location.toLowerCase().replace(" ", "-")}
+  >
+    {location}
+  </h1>
+  <br />
   <div class="grid sm:grid-cols-2 lg:grid-cols-3 items-center gap-6">
     <!-- Card -->
     {
@@ -38,11 +40,17 @@ const { cards } = Astro.props;
                 {card.description}
               </p>
               <br />
-              <ul class="list-disc text-gray-600 dark:text-neutral-400">
-                <li>When: Every {card.date}</li>
-                <li>Age Range: School years {card.ages}</li>
-              </ul>
+              {card.type === "After School" && (
+                <ul class="list-disc text-gray-600 dark:text-neutral-400">
+                  <li>
+                    When: Every {card.day} from {card.time}
+                  </li>
+                  <li>Age Range: School years {card.ages}</li>
+                  {card.starts && <li>Starts: {card.starts}</li>}
+                </ul>
+              )}
             </div>
+
             {card.signupLink && (
               <p class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-gray-800 dark:text-neutral-200">
                 Sign Up
@@ -68,4 +76,3 @@ const { cards } = Astro.props;
     }
   </div>
 </div>
-<!-- End Icon Blocks -->
diff --git a/src/data.ts b/src/data.ts
@@ -286,7 +286,18 @@ export const faqs: FAQ[] = [
   },
 ];
 
-export const sessions = [
+export interface Session {
+  title: string;
+  ages: string;
+  day: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";
+  time: string;
+  description: string;
+  type: "After School" | "During School Enrichment";
+  signupLink?: string;
+  starts?: string;
+}
+
+export const sessions: { location: string; sessions: Session[] }[] = [
   {
     location: "Wellington",
     sessions: [
@@ -343,6 +354,7 @@ export const sessions = [
         ages: "5 - 8",
         day: "Thursday",
         time: "3:30pm to 5:30pm",
+        starts: "Thursday 9th May",
         description:
           "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
         type: "After School",
@@ -353,6 +365,7 @@ export const sessions = [
         ages: "7 - 8",
         day: "Friday",
         time: "Schooltime",
+
         description:
           "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
         type: "During School Enrichment",
@@ -365,7 +378,8 @@ export const sessions = [
       {
         title: "Naenae Community Centre",
         ages: "5 - 8",
-        date: "Monday from 3:30pm to 5:30pm",
+        day: "Monday",
+        time: "3:30pm to 5:30pm",
         description:
           "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
         type: "After School",
@@ -378,15 +392,17 @@ export const sessions = [
       {
         title: "Ūpane",
         ages: "9 - 13",
-        date: "Monday from 3:30pm to 5:30pm",
+        day: "Monday",
+        time: "3:30pm to 5:30pm",
         description:
           "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
         type: "After School",
       },
       {
         title: "Ūpane",
         ages: "5 - 8",
-        date: "Tuesday from 3:30pm to 5:30pm",
+        day: "Tuesday",
+        time: "3:30pm to 5:30pm",
         description:
           "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
         type: "After School",

diff --git a/src/pages/what-we-do.astro b/src/pages/what-we-do.astro
@@ -8,9 +8,7 @@ const title = "What We Do";
 ---
 
 <Layout meta={{ title }}>
-  <!-- Hero -->
   <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
-    <!-- Grid -->
     <div class="grid lg:grid-cols-7 lg:gap-x-8 xl:gap-x-12 lg:items-center">
       <div class="lg:col-span-3">
         <h1
@@ -22,7 +20,6 @@ const title = "What We Do";
           We Do a Lot
         </p>
       </div>
-      <!-- End Col -->
 
       <div class="lg:col-span-4 mt-10 lg:mt-0">
         <Image
@@ -31,11 +28,8 @@ const title = "What We Do";
           class="w-full rounded-xl"
         />
       </div>
-      <!-- End Col -->
     </div>
-    <!-- End Grid -->
   </div>
-  <!-- End Hero -->
 
-  {sessions.map((location) => <IconCards cards={location.sessions} />)}
+  {sessions.map((location) => <IconCards cards={location.sessions} location={location.location}/>)}
 </Layout>