Add a carnaval countdown page

app/timer/page.tsx

@@ -0,0 +1,71 @@
+import React, { Suspense } from 'react';
+
+const page = () => {
+  return (
+    <div>
+      <h1>Wanneer begint de carnaval?</h1>
+      <CarnavalCountdown />
+    </div>
+  );
+};
+
+const CarnavalCountdown: React.FC = () => {
+    const carnivalDates = calculateCarnivalDates();
+
+    return (
+        <div>
+            {carnivalDates.map((carnivalDate, index) => (
+                <div key={index}>
+                <h2>{`Carnaval ${carnivalDate.year}`}</h2>
+                <p>Date: {carnivalDate.date.toDateString()}</p>
+                <CountdownWrapper targetDate={carnivalDate.date} />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+const CountdownTimer = React.lazy(() => import('../../components/constants/CountDownTimer'));
+
+const CountdownWrapper = ({ targetDate }: {targetDate: Date}) => (
+  <Suspense fallback={<div>Countdown aan het laden</div>}>
+    <CountdownTimer targetDate={targetDate} />
+  </Suspense>
+);
+
+function calculateEasterDate(year: number) {
+    const a = year % 19;
+    const b = Math.floor(year / 100);
+    const c = year % 100;
+    const d = Math.floor(b / 4);
+    const e = b % 4;
+    const f = Math.floor((b + 8) / 25);
+    const g = Math.floor((b - f + 1) / 3);
+    const h = (19 * a + b - d - g + 15) % 30;
+    const i = Math.floor(c / 4);
+    const k = c % 4;
+    const l = (32 + 2 * e + 2 * i - h - k) % 7;
+    const m = Math.floor((a + 11 * h + 22 * l) / 451);
+    const month = Math.floor((h + l - 7 * m + 114) / 31);
+    const day = ((h + l - 7 * m + 114) % 31) + 1;
+
+    return new Date(year, month - 1, day); // Month is 0-indexed
+  };
+
+function calculateCarnivalDates(): { year: number; date: Date }[] {
+    const currentYear = new Date().getFullYear();
+    const carnivalDatesArray: { year: number; date: Date }[] = [];
+
+    for (let i = 0; i < 10; i++) {
+      const year = currentYear + i;
+      const easterDate = calculateEasterDate(year);
+      const carnivalStartDate = new Date(easterDate);
+      carnivalStartDate.setDate(easterDate.getDate() - 49); // 7 weeks before Easter
+
+      carnivalDatesArray.push({ year, date: carnivalStartDate });
+    }
+
+    return carnivalDatesArray;
+  };
+
+export default page;

app/veer-goon-door/page.tsx

@@ -9,7 +9,6 @@ export async function generateMetadata() {
 }
 
 const page = () => {
-
   return (
     <div className="py-8 px-4 sm:px-4 md:px-8 lg:px-8 xl:px-8 bg-heroBackground">
       <div className="p-3 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-3xl bg-white max-w-3xl">

components/constants/CountDownTimer.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export interface CountdownTimerProps {
+    targetDate: Date;
+}
+
+const CountdownTimer = ({ targetDate }: CountdownTimerProps) => {
+    const [timeRemaining, setTimeRemaining] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        const now = new Date();
+        const difference: number = targetDate.getTime() - now.getTime();
+
+        if (difference <= 0) {
+          clearInterval(intervalId);
+          setTimeRemaining({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+        } else {
+          const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+          const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+          const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+          const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+          setTimeRemaining({ days, hours, minutes, seconds });
+        }
+      }, 1000);
+
+      return () => clearInterval(intervalId);
+    }, [targetDate]);
+
+    return (
+        <p>
+          {timeRemaining.days} dagen, {timeRemaining.hours} uren, {timeRemaining.minutes} minuten en {timeRemaining.seconds} seconden
+        </p>
+    );
+  };
+
+  export default CountdownTimer;

next.config.js

@@ -28,6 +28,14 @@ const nextConfig = {
           source: '/nieuwsberichten/:path*',
           destination: '/articles/:path*',
         },
+        {
+          source: '/nieuws/:path*',
+          destination: '/articles/:path*',
+        },
+        {
+          source: '/timer',
+          destination: '/wanneer-begint-de-carnaval',
+        },
       ]
     }
   },