Update TideTablePage.tsx

Jbithell · Jun 8, 2024 · 76b1416 · 76b1416
1 parent a9ae32f
commit 76b1416
Showing 1 changed file with 32 additions and 15 deletions.
diff --git a/src/components/templates/TideTablePage.tsx b/src/components/templates/TideTablePage.tsx
@@ -1,34 +1,51 @@
 import * as React from "react"
 import type { HeadFC, PageProps } from "gatsby"
-import { Card, Center, Container, Group, Image, Text } from "@mantine/core"
+import { Card, Center, Container, Group, Image, Table, Text } from "@mantine/core"
 import TidalData from "../../../data/tides.json";
 import { SEO } from "../../components/SEO";
 import Layout from "../navigation/Layout";
 import { DateTime } from "luxon";
 import { TidesJson_PDFObject, TidesJson_ScheduleObject } from "../../types";
 
 
-const Page: React.FC<PageProps> = ({ pageContext }: { pageContext: { pdf: TidesJson_PDFObject } }) => {
-  const firstDayOfMonth = pageContext.pdf.date;
+const Page: React.FC<PageProps> = ({ pageContext }) => {
+  const { pdf } = pageContext as { pdf: TidesJson_PDFObject };
+  const firstDayOfMonth = pdf.date;
   const monthMatch = firstDayOfMonth.split("-")[0] + firstDayOfMonth.split("-")[1];
   const tides = TidalData.schedule.filter((element: TidesJson_ScheduleObject) => {
     return element.date.startsWith(monthMatch)
   });
-  console.log(tides)
   return (
     <Layout>
-      {tides.map((element: TidesJson_ScheduleObject, index: React.Key) => (
-        <Card shadow="xs" key={index}>
-
-          <Text size="xl" fw={500}>{DateTime.fromSQL(element.date).toLocaleString({ weekday: "long", day: "2-digit", month: "long" })}</Text>
-          {element.groups.map(tide => (
-            <Group justify="start" mt="md" mb="xs">
-              <Text size="lg" fw={500} >{DateTime.fromSQL(element.date + " " + tide.time).toLocaleString(DateTime.TIME_SIMPLE)}</Text>
-              <Text size="lg" fw={200}>{tide.height}m</Text>
-            </Group>
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Date</Table.Th>
+            <Table.Th>Sunrise</Table.Th>
+            <Table.Th>Time</Table.Th>
+            <Table.Th>Height</Table.Th>
+            <Table.Th>Time</Table.Th>
+            <Table.Th>Height</Table.Th>
+            <Table.Th>Sunset</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {tides.map((element: TidesJson_ScheduleObject, index: React.Key) => (
+            element.groups.map(tide => (
+              <Table.Tr key={index}>
+                <Table.Td>{DateTime.fromSQL(element.date).toLocaleString({ weekday: "long", day: "2-digit" })}</Table.Td>
+                {element.groups.map(tide => (
+                    <>
+                      <Table.Td>{DateTime.fromSQL(element.date + " " + tide.time).toLocaleString(DateTime.TIME_SIMPLE)}</Table.Td>
+                      <Table.Td>{tide.height}</Table.Td>
+                    </>
+                  ))}
+                  {element.groups.length === 1 ? <Table.Td colSpan={2}></Table.Td> : null}
+                </Table.Tr>
+              ))
           ))}
-        </Card>
-      ))}
+        </Table.Tbody>
+      </Table>
     </Layout>
   )
 }