Add link to page from tide table

Jbithell · Jul 17, 2024 · 256a0e7 · 256a0e7
1 parent 551bed5
commit 256a0e7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/src/components/templates/TideGraphPage.tsx b/src/components/templates/TideGraphPage.tsx
@@ -11,6 +11,7 @@ import {
   IconArrowRight,
   IconDownload,
   IconFileTypePdf,
+  IconHome,
 } from "@tabler/icons-react";
 import { TideTable } from "../tideTables/TideTable";
 import { TideTableMobile } from "../tideTables/TideTableMobile";
@@ -45,6 +46,11 @@ const Page: React.FC<PageProps> = ({ pageContext }) => {
               </Button>
             </Link>
           ) : null}
+          <Link to={"/"}>
+            <Button variant="light">
+              <IconHome size={14} />
+            </Button>
+          </Link>
           {nextDay ? (
             <Link to={"/tide-graph/" + nextDay}>
               <Button

diff --git a/src/components/tideTables/TideTable.tsx b/src/components/tideTables/TideTable.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { DateTime } from "luxon";
 import { TidesJson_ScheduleObject } from "../../types";
 import { IconSunrise, IconSunset } from "@tabler/icons-react";
+import { Link } from "gatsby";
 
 export function TideTable({ data }: { data: TidesJson_ScheduleObject[] }) {
   return (
@@ -22,16 +23,23 @@ export function TideTable({ data }: { data: TidesJson_ScheduleObject[] }) {
         {data.map((date: TidesJson_ScheduleObject, index: React.Key) => (
           <Table.Tr key={index}>
             <Table.Td>
-              <Text>
-                {DateTime.fromSQL(date.date).toLocaleString({
-                  weekday: "long",
-                  day: "2-digit",
-                })}
-                {DateTime.fromSQL(date.date).toJSDate().setHours(0, 0, 0, 0) ==
-                new Date().setHours(0, 0, 0, 0) ? (
-                  <Badge ml="sm">Today</Badge>
-                ) : null}
-              </Text>
+              <Link
+                to={"/tide-graph/" + date.date}
+                title="Tidal Graph"
+                style={{ textDecoration: "none", color: "inherit" }}
+              >
+                <Text>
+                  {DateTime.fromSQL(date.date).toLocaleString({
+                    weekday: "long",
+                    day: "2-digit",
+                  })}
+                  {DateTime.fromSQL(date.date)
+                    .toJSDate()
+                    .setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0) ? (
+                    <Badge ml="sm">Today</Badge>
+                  ) : null}
+                </Text>
+              </Link>
             </Table.Td>
             <Table.Td>
               <Text>