feat: events page

package.json

@@ -14,13 +14,15 @@
     "@formatjs/intl-localematcher": "^0.5.7",
     "@headlessui/react": "^2.2.0",
     "@types/negotiator": "^0.6.3",
+    "axios": "^1.7.9",
     "markdown-to-jsx": "^7.7.4",
     "motion": "^11.11.15",
     "negotiator": "^1.0.0",
     "next": "14.2.16",
     "react": "^18",
     "react-dom": "^18",
     "react-intersection-observer": "^9.13.1",
+    "react-swipeable": "^7.0.2",
     "swiper": "^11.2.1"
   },
   "devDependencies": {

src/app/[lang]/about/become-a-collaborator/layout.tsx

@@ -2,14 +2,15 @@ import {
   getDictionary,
   type Locale,
 } from "@/internationalization/dictionaries";
+import { fullLocale } from "@/lib/locale";
 import { type Metadata } from "next";
 
 export function generateMetadata({
   params: { lang },
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     title: dict.seo.become_a_collaborator.title,
@@ -42,8 +43,8 @@ export function generateMetadata({
     alternates: {
       canonical: "https://cesium.di.uminho.pt/about/become-a-collaborator",
       languages: {
-        en: "https://cesium.di.uminho.pt/en_US/about/become-a-collaborator",
-        pt: "https://cesium.di.uminho.pt/pt_PT/about/team",
+        en: "https://cesium.di.uminho.pt/en/about/become-a-collaborator",
+        pt: "https://cesium.di.uminho.pt/pt/about/team",
       },
     },
   };

src/app/[lang]/about/become-a-member/layout.tsx

@@ -2,14 +2,15 @@ import {
   getDictionary,
   type Locale,
 } from "@/internationalization/dictionaries";
+import { fullLocale } from "@/lib/locale";
 import { type Metadata } from "next";
 
 export function generateMetadata({
   params: { lang },
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     title: dict.seo.become_a_member.title,
@@ -42,8 +43,8 @@ export function generateMetadata({
     alternates: {
       canonical: "https://cesium.di.uminho.pt/about/become-a-member",
       languages: {
-        en: "https://cesium.di.uminho.pt/en_US/about/become-a-member",
-        pt: "https://cesium.di.uminho.pt/pt_PT/about/become-a-member",
+        en: "https://cesium.di.uminho.pt/en/about/become-a-member",
+        pt: "https://cesium.di.uminho.pt/pt/about/become-a-member",
       },
     },
   };

src/app/[lang]/about/departments/layout.tsx

@@ -2,14 +2,15 @@ import {
   getDictionary,
   type Locale,
 } from "@/internationalization/dictionaries";
+import { fullLocale } from "@/lib/locale";
 import { type Metadata } from "next";
 
 export function generateMetadata({
   params: { lang },
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     title: dict.seo.departments.title,
@@ -42,8 +43,8 @@ export function generateMetadata({
     alternates: {
       canonical: "https://cesium.di.uminho.pt/about/departments",
       languages: {
-        en: "https://cesium.di.uminho.pt/en_US/about/departments",
-        pt: "https://cesium.di.uminho.pt/pt_PT/about/departments",
+        en: "https://cesium.di.uminho.pt/en/about/departments",
+        pt: "https://cesium.di.uminho.pt/pt/about/departments",
       },
     },
   };

src/app/[lang]/about/layout.tsx

@@ -2,14 +2,15 @@ import {
   getDictionary,
   type Locale,
 } from "@/internationalization/dictionaries";
+import { fullLocale } from "@/lib/locale";
 import { type Metadata } from "next";
 
 export function generateMetadata({
   params: { lang },
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     title: dict.seo.about.title,
@@ -42,8 +43,8 @@ export function generateMetadata({
     alternates: {
       canonical: "https://cesium.di.uminho.pt/about",
       languages: {
-        en: "https://cesium.di.uminho.pt/en_US/about",
-        pt: "https://cesium.di.uminho.pt/pt_PT/about",
+        en: "https://cesium.di.uminho.pt/en/about",
+        pt: "https://cesium.di.uminho.pt/pt/about",
       },
     },
   };

src/app/[lang]/about/team/layout.tsx

@@ -2,14 +2,15 @@ import {
   getDictionary,
   type Locale,
 } from "@/internationalization/dictionaries";
+import { fullLocale } from "@/lib/locale";
 import { type Metadata } from "next";
 
 export function generateMetadata({
   params: { lang },
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     title: dict.seo.team.title,
@@ -42,8 +43,8 @@ export function generateMetadata({
     alternates: {
       canonical: "https://cesium.di.uminho.pt/about/team",
       languages: {
-        en: "https://cesium.di.uminho.pt/en_US/about/team",
-        pt: "https://cesium.di.uminho.pt/pt_PT/about/team",
+        en: "https://cesium.di.uminho.pt/en/about/team",
+        pt: "https://cesium.di.uminho.pt/pt/about/team",
       },
     },
   };

src/app/[lang]/events/layout.tsx

@@ -2,14 +2,15 @@ import {
   getDictionary,
   type Locale,
 } from "@/internationalization/dictionaries";
+import { fullLocale } from "@/lib/locale";
 import { type Metadata } from "next";
 
 export function generateMetadata({
   params: { lang },
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     title: dict.seo.events.title,
@@ -42,8 +43,8 @@ export function generateMetadata({
     alternates: {
       canonical: "https://cesium.di.uminho.pt/events",
       languages: {
-        en: "https://cesium.di.uminho.pt/en_US/events",
-        pt: "https://cesium.di.uminho.pt/pt_PT/events",
+        en: "https://cesium.di.uminho.pt/en/events",
+        pt: "https://cesium.di.uminho.pt/pt/events",
       },
     },
   };

src/app/[lang]/events/page.tsx

@@ -1,3 +1,115 @@
-export default function Events() {
-  return <main>Events</main>;
-}
+"use client";
+
+import { Calendar } from "@/components/calendar";
+import { EventList } from "@/components/event-list";
+import PromotionalCard from "@/components/promotional-card";
+import { useDictionary } from "@/contexts/dictionary-provider";
+import getEvents from "@/lib/api/getEvents";
+import { type Event, CardType } from "@/lib/types";
+import { useEffect, useState } from "react";
+import { isSameDay } from "@/lib/utils";
+import { horizontalPadding, verticalPadding } from "@/lib/styling";
+import AppLink from "@/components/link";
+import Markdown from "markdown-to-jsx";
+
+export default function EventsPage() {
+  const dict = useDictionary();
+  const [events, setEvents] = useState<Event[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    async function fetchEvents() {
+      try {
+        setIsLoading(true);
+        const eventsData = await getEvents();
+        setEvents(eventsData);
+      } catch (error) {
+        console.error("Failed to fetch events:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    void fetchEvents();
+  }, []);
+
+  const handleDateSelect = (date: Date | null) => {
+    setSelectedDate((prevDate) =>
+      prevDate && date && isSameDay(prevDate, date) ? null : date,
+    );
+  };
+
+  const handleClearDate = () => {
+    setSelectedDate(null);
+  };
+
+  return (
+    <main
+      className={`flex flex-col gap-10 lg:gap-14 ${horizontalPadding} ${verticalPadding}`}
+    >
+      <div className="flex items-center justify-between">
+        <h1 className="font-title text-3xl font-medium">{dict.events.title}</h1>
+        <div className="hidden items-center gap-4 lg:flex">
+          <AppLink
+            href="https://calendario.cesium.di.uminho.pt/"
+            arrow="outward"
+            title="Calendarium"
+          />
+          <AppLink
+            href="https://instagram.com/cesiuminho"
+            arrow="outward"
+            title="Instagram"
+          />
+        </div>
+      </div>
+
+      <div className="md:flex md:gap-12">
+        <div className="mb-8 flex w-full flex-col gap-14 md:mb-0 md:w-2/5">
+          <Calendar
+            events={events}
+            onDateSelect={handleDateSelect}
+            selectedDate={selectedDate}
+            className="your-calendar-class"
+          />
+          <div className="hidden md:block">
+            <PromotionalCard mobileOnlyLayout type={CardType.Membership} />
+          </div>
+        </div>
+        <div className="flex flex-1 flex-col gap-6">
+          <EventList
+            events={events}
+            isLoading={isLoading}
+            selectedDate={selectedDate}
+            onClearDate={handleClearDate}
+          />
+          <div className="text-sm">
+            <h2 className="mb-4 font-title text-2xl font-medium">
+              {dict.events.warningTitle}
+            </h2>
+            <div className="text-black/50">
+              <Markdown
+                options={{
+                  overrides: {
+                    a: {
+                      props: {
+                        className: "font-bold text-primary hover:underline",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                      },
+                    },
+                  },
+                }}
+              >
+                {dict.events.warning}
+              </Markdown>
+            </div>
+          </div>
+          <div className="md:hidden">
+            <PromotionalCard type={CardType.Membership} />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/[lang]/layout.tsx

@@ -8,6 +8,7 @@ import {
 import { DictionaryProvider } from "@/contexts/dictionary-provider";
 import Navbar from "@/components/navbar";
 import Footer from "@/components/footer";
+import { fullLocale } from "@/lib/locale";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -25,15 +26,15 @@ export function generateMetadata({
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     metadataBase: new URL("https://cesium.di.uminho.pt"),
     openGraph: {
       siteName: dict.seo.title,
       type: "website",
-      locale: "pt_PT",
-      alternateLocale: "en_US",
+      locale: "pt",
+      alternateLocale: "en",
     },
     robots: {
       index: true,
@@ -82,14 +83,14 @@ export default function RootLayout({
   params: { lang },
 }: Readonly<{ children: React.ReactNode; params: { lang: Locale } }>) {
   return (
-    <html lang={lang}>
+    <html lang={fullLocale(lang)}>
       <head>
         <meta name="apple-mobile-web-app-title" content="CeSIUM" />
       </head>
       <body
         className={`${inter.variable} ${orbitron.variable} overflow-x-hidden bg-white font-sans text-black antialiased`}
       >
-        <DictionaryProvider lang={lang}>
+        <DictionaryProvider lang={fullLocale(lang)}>
           <Navbar />
           <div className="h-full">{children}</div>
           <Footer />

src/app/[lang]/page.tsx

@@ -2,6 +2,7 @@ import {
   getDictionary,
   type Locale,
 } from "@/internationalization/dictionaries";
+import { fullLocale } from "@/lib/locale";
 import { type Metadata } from "next";
 import StoreCard from "@/components/store-card";
 import PromotionalCard from "@/components/promotional-card";
@@ -13,7 +14,7 @@ export function generateMetadata({
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     title: dict.seo.title,

src/app/[lang]/partners/layout.tsx

@@ -2,14 +2,15 @@ import {
   getDictionary,
   type Locale,
 } from "@/internationalization/dictionaries";
+import { fullLocale } from "@/lib/locale";
 import { type Metadata } from "next";
 
 export function generateMetadata({
   params: { lang },
 }: {
   params: { lang: Locale };
 }): Metadata {
-  const dict = getDictionary(lang);
+  const dict = getDictionary(fullLocale(lang));
 
   return {
     title: dict.seo.partners.title,
@@ -42,8 +43,8 @@ export function generateMetadata({
     alternates: {
       canonical: "https://cesium.di.uminho.pt/partners",
       languages: {
-        en: "https://cesium.di.uminho.pt/en_US/partners",
-        pt: "https://cesium.di.uminho.pt/pt_PT/partners",
+        en: "https://cesium.di.uminho.pt/en/partners",
+        pt: "https://cesium.di.uminho.pt/pt/partners",
       },
     },
   };