+ );
+}
diff --git a/src/components/tideTables/TideTablesMonthList.tsx b/src/components/tideTables/TideTablesMonthList.tsx
new file mode 100644
index 0000000..5ac0a24
--- /dev/null
+++ b/src/components/tideTables/TideTablesMonthList.tsx
@@ -0,0 +1,35 @@
+import { Badge, Card, Group, SimpleGrid, Table, Text } from "@mantine/core";
+import React from "react";
+import { DateTime } from "luxon";
+import { TidesJson_PDFObject, TidesJson_ScheduleObject } from "../../types";
+import {
+ IconArrowRight,
+ IconSun,
+ IconSunrise,
+ IconSunset,
+} from "@tabler/icons-react";
+import { devNull } from "os";
+import { Link } from "gatsby";
+
+export function TideTablesMonthList({ files }: { files: TidesJson_PDFObject[] }) {
+ return (
+
+ {files.map((month: TidesJson_PDFObject, index: React.Key) => (
+
+
+
+
+ {month.name}
+
+
+
+
+
+ ))}
+
+ );
+}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index df2170e..f5cf066 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Link, HeadFC, PageProps } from "gatsby"
-import { Title, Text, Button, Container, Group } from '@mantine/core';
-import Layout from "../components/navigation/Layout"
-import * as classes from './404.module.css';
+import * as React from "react";
+import { Link, HeadFC, PageProps } from "gatsby";
+import { Title, Text, Button, Container, Group } from "@mantine/core";
+import Layout from "../components/navigation/Layout";
+import * as classes from "./404.module.css";
import { SEO } from "../components/SEO";
const Page: React.FC = () => {
@@ -12,21 +12,21 @@ const Page: React.FC = () => {
404
Page not found
- Unfortunately, the page you requested could not be found. You may have mistyped the address, or the page has
- been moved to another URL.
+ Unfortunately, the page you requested could not be found. You may have
+ mistyped the address, or the page has been moved to another URL.
-
+
+
+
- )
-}
+ );
+};
-export default Page
+export default Page;
-export const Head: HeadFC = () => (
-
-)
\ No newline at end of file
+export const Head: HeadFC = () => ;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 78d3017..7884b7b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,13 +1,26 @@
-import * as React from "react"
-import type { HeadFC, PageProps } from "gatsby"
-import { Badge, Card, Center, Container, Group, Image, SimpleGrid, Text, Title, useMatches } from "@mantine/core"
+import * as React from "react";
+import { Link, type HeadFC, type PageProps } from "gatsby";
+import {
+ Badge,
+ Button,
+ Card,
+ Center,
+ Container,
+ Group,
+ Image,
+ SimpleGrid,
+ Text,
+ Title,
+ useMatches,
+} from "@mantine/core";
import Logo from "./../images/porthmadogCob.jpg";
-import Layout from "../components/navigation/Layout"
+import Layout from "../components/navigation/Layout";
import TidalData from "../../data/tides.json";
import { SEO } from "../components/SEO";
import { DateTime } from "luxon";
import { LineChart } from "@mantine/charts";
import { TidesJson_ScheduleObject } from "../types";
+import { IconArrowRight, IconTable } from "@tabler/icons-react";
const Page: React.FC = () => {
const daysToDisplay = useMatches({ base: 5, sm: 6, md: 8, lg: 10, xl: 10 });
@@ -15,34 +28,101 @@ const Page: React.FC = () => {
today.setHours(0, 0, 0, 0);
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + daysToDisplay);
- const tides = TidalData.schedule.filter((element: TidesJson_ScheduleObject) => {
- let date = new Date(element.date);
- return date >= today && date <= nextWeek
- });
+ const tides = TidalData.schedule.filter(
+ (tideDay: TidesJson_ScheduleObject) => {
+ let date = new Date(tideDay.date);
+ return date >= today && date <= nextWeek;
+ }
+ );
return (
-
+
+
+ Porthmadog Tide Times
+
+
+
+
+ High Tide Times this week
+
+
+ }
+ variant="light"
+ visibleFrom="sm"
+ >
+ {DateTime.fromJSDate(nextWeek).toLocaleString({
+ month: "long",
+ })}{" "}
+ Tide Table
+
+
+
+
{tides.map((element: TidesJson_ScheduleObject, index: React.Key) => (
-
-
- {DateTime.fromSQL(element.date).toLocaleString({ weekday: "long", day: "2-digit", month: "long" })}
- {element.groups.map(tide => (
-
- {DateTime.fromSQL(element.date + " " + tide.time).toLocaleString(DateTime.TIME_SIMPLE)}
- {tide.height}m
+
+
+ {DateTime.fromSQL(element.date).toLocaleString({
+ weekday: "long",
+ day: "2-digit",
+ month: "long",
+ })}
+
+ {element.groups.map((tide) => (
+
+
+ {DateTime.fromSQL(
+ element.date + " " + tide.time
+ ).toLocaleString(DateTime.TIME_SIMPLE)}
+
+
+ {tide.height}m
+
))}
))}
+
+
+
+
+ {DateTime.fromJSDate(nextWeek).toLocaleString({
+ month: "long",
+ })}{" "}
+ Tide Table
+
+
+
+
+
- )
-}
+ );
+};
-export default Page
+export default Page;
-export const Head: HeadFC = () => (
-
-)
\ No newline at end of file
+export const Head: HeadFC = () => ;
diff --git a/src/pages/tide-tables.tsx b/src/pages/tide-tables.tsx
new file mode 100644
index 0000000..117d023
--- /dev/null
+++ b/src/pages/tide-tables.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import type { HeadFC, PageProps } from "gatsby";
+import {
+ Accordion,
+ Button,
+ Card,
+ Center,
+ Container,
+ Group,
+ Image,
+ SimpleGrid,
+ Text,
+} from "@mantine/core";
+import Layout from "../components/navigation/Layout";
+import { SEO } from "../components/SEO";
+import TidalData from "../../data/tides.json";
+import { Link } from "gatsby";
+import { TidesJson_PDFObject } from "../types";
+import { IconArrowLeft, IconArrowRight, IconHome } from "@tabler/icons-react";
+import { TideTablesMonthList } from "../components/tideTables/TideTablesMonthList";
+
+const Page: React.FC = () => {
+ const month = new Date();
+ month.setHours(0, 0, 0, 0);
+ month.setDate(1);
+ const nextYear = new Date(month);
+ nextYear.setFullYear(month.getFullYear() + 1);
+ const files = TidalData.pdfs.filter((month: TidesJson_PDFObject) => {
+ let date = new Date(month.date);
+ return date < nextYear;
+ });
+ const years = [
+ ...new Set(
+ files.map((month: TidesJson_PDFObject) => {
+ return new Date(month.date).getFullYear();
+ })
+ ),
+ ].map((year) => {
+ return {
+ year: year as number,
+ months: files.filter((month: TidesJson_PDFObject) => {
+ return year == new Date(month.date).getFullYear();
+ }),
+ };
+ });
+ console.log(years);
+ return (
+
+ } variant="light">
+ Homepage
+
+
+ }
+ >
+
+ {years.map((year) => (
+
+ {year.year}
+
+
+
+
+ ))}
+
+
+ );
+};
+
+export default Page;
+
+export const Head: HeadFC = () => ;
diff --git a/src/pages/tideTables.tsx b/src/pages/tideTables.tsx
deleted file mode 100644
index a4299e3..0000000
--- a/src/pages/tideTables.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react"
-import type { HeadFC, PageProps } from "gatsby"
-import { Center, Container, Image, Text } from "@mantine/core"
-import Layout from "../components/navigation/Layout"
-import { SEO } from "../components/SEO";
-import TidalData from "../../data/tides.json";
-import { Link } from "gatsby";
-import { TidesJson_PDFObject } from "../types";
-
-
-const Page: React.FC = () => {
- const month = new Date();
- month.setHours(0, 0, 0, 0);
- month.setDate(1);
- const nextYear = new Date(month);
- nextYear.setFullYear(month.getFullYear() + 1);
- const files = TidalData.pdfs.filter((element: TidesJson_PDFObject) => {
- let date = new Date(element.date);
- return date < nextYear;
- });
- return (
-
-