Semantic fixes, News page, and Calendar Page

components/MonthCalendar.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// remove this later^
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
+import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { useLanguage } from "@/lib/LanguageContext";
+import fiLocale from "@fullcalendar/core/locales/fi";
+import svLocale from "@fullcalendar/core/locales/sv";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+
+const MonthCalendar = () => {
+  const { language } = useLanguage();
+  const localeMap = {
+    fi: fiLocale,
+    sv: svLocale,
+    en: enLocale,
+  };
+  const currentLocale = localeMap[language] || enLocale;
+  return (
+    <>
+      <FullCalendar
+        schedulerLicenseKey={process.env.FULL_CALENDAR_KEY}
+        plugins={[dayGridPlugin]}
+        initialView="dayGridMonth"
+        locale={currentLocale}
+      />
+      <div />
+    </>
+  );
+};
+
+export default MonthCalendar;

components/WeekCalendar.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// remove this later^
+import { useLanguage } from "@/lib/LanguageContext";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+import fiLocale from "@fullcalendar/core/locales/fi";
+import svLocale from "@fullcalendar/core/locales/sv";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/timegrid";
+
+const WeekCalendar = () => {
+  const { language } = useLanguage();
+  const localeMap = {
+    fi: fiLocale,
+    sv: svLocale,
+    en: enLocale,
+  };
+  const currentLocale = localeMap[language] || enLocale;
+  return (
+    <>
+      <FullCalendar
+        schedulerLicenseKey={process.env.FULL_CALENDAR_KEY}
+        plugins={[dayGridPlugin]}
+        initialView="timeGridWeek"
+        locale={currentLocale}
+      />
+      <div />
+    </>
+  );
+};
+
+export default WeekCalendar;

hooks/translations.json

@@ -4,6 +4,8 @@
     "en": "Satakunta Nation",
     "sv": "Satakunta Nation"
   },
+  "nav:calendar": { "fi": "Kalenteri", "en": "Calendar", "sv": "Kalender" },
+  "nav:events": { "fi": "Tapahtumat", "en": "Events", "sv": "Evenemang" },
   "nav:forMembers": {
     "fi": "Jäsenille",
     "en": "For Members",
@@ -21,6 +23,7 @@
     "en": "Nation Info",
     "sv": "Samma på svenska"
   },
+  "nav:news": { "fi": "Uutiset", "en": "News", "sv": "Nyheter" },
   "nav:officialDocuments": {
     "fi": "Viralliset Dokumentit",
     "en": "Official Documents",

package.json

@@ -19,6 +19,14 @@
     "@directus/sdk": "^17.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
+    "@fullcalendar/resource": "^6.1.15",
+    "@fullcalendar/resource-timegrid": "^6.1.15",
+    "@fullcalendar/resource-timeline": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
     "@mui/material": "^5.15.20",
     "dotenv": "^16.4.5",
     "embla-carousel": "^8.1.6",

pages/calendar.tsx

@@ -0,0 +1,51 @@
+import Navbar, { NavbarProps } from "@/components/Navbar";
+import createClient from "@/lib/cmsClient";
+import styles from "@/styles/calendar.module.css";
+import { readItems } from "@directus/sdk";
+import { GetStaticProps } from "next";
+import Head from "next/head";
+import MonthCalendar from "@/components/MonthCalendar";
+
+export const getStaticProps: GetStaticProps<CalendarPageProps> = async () => {
+  const client = createClient();
+  const links = await client.request(readItems("NavigationLink"));
+  return {
+    props: {
+      navBar: {
+        links,
+      },
+    },
+  };
+};
+
+type CalendarPageProps = {
+  navBar: NavbarProps;
+};
+
+export default function News({ navBar }: CalendarPageProps) {
+  return (
+    <>
+      <Head>
+        <title>Satakuntalainen Osakunta</title>
+        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
+      <Navbar links={navBar.links} />
+      <header className={styles.header}>
+        <div className={styles.headerContainer}>
+          <h1 className={styles.h1}>Kalenteri</h1>
+          <p className={styles.headerText}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem odit
+            distinctio, ullam doloremque provident voluptas illo quaerat ex
+            saepe voluptate reiciendis rerum fuga obcaecati esse sit cum maxime,
+            dolorem facilis?
+          </p>
+        </div>
+      </header>
+      <main className={styles.main}>
+        <MonthCalendar />
+      </main>
+      <footer className={styles.footer} />
+    </>
+  );
+}