From ebb4dc301916d87cab1c7bd58948ea35d8839b87 Mon Sep 17 00:00:00 2001
From: phiko-misc <phgu03@gmail.com>
Date: Tue, 24 Oct 2023 15:11:36 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor(prettier):=20auto=20for?=
 =?UTF-8?q?mat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/SimpleButton.tsx        |  49 +++---
 src/components/button/ThemeButton.tsx         |  63 +++----
 src/components/countdown/CountDown.tsx        | 155 +++++++++---------
 src/components/countdown/NumberBox.tsx        |  49 +++---
 .../icons/ChevronRightIcon copy.tsx           |  29 ++--
 src/components/icons/ChevronRightIcon.tsx     |  29 ++--
 src/components/icons/MoonIcon.tsx             |  29 ++--
 src/components/icons/SunIcon.tsx              |  27 ++-
 src/components/layout/Layout.tsx              |  32 ++--
 src/components/snow.tsx                       |  31 ++--
 src/core/utils.ts                             |  32 ++--
 src/pages/[id].tsx                            |  97 ++++++-----
 src/pages/_app.tsx                            |  28 ++--
 src/pages/_document.tsx                       |   4 +-
 src/pages/api/[id].tsx                        |  44 ++---
 src/pages/calender.tsx                        |  76 +++++----
 src/pages/index.tsx                           |  37 +++--
 17 files changed, 453 insertions(+), 358 deletions(-)

diff --git a/src/components/button/SimpleButton.tsx b/src/components/button/SimpleButton.tsx
index 8ac930d..2280700 100644
--- a/src/components/button/SimpleButton.tsx
+++ b/src/components/button/SimpleButton.tsx
@@ -4,30 +4,31 @@ import Link from "next/link";
 import { ReactNode } from "react";
 
 interface Props {
-    icon: ReactNode;
-    link?: string;
-    className?: string;
-    disabled?: boolean;
+  icon: ReactNode;
+  link?: string;
+  className?: string;
+  disabled?: boolean;
 }
 
 export default function SimpleButton(props: Props) {
-    return (
-        <button disabled={props.disabled} className={clsx(
-            "disabled:brightness-75 h-32 w-32 lg:h-44 lg:w-44 bg-gradient-to-r from-rose-700 to-rose-900 rounded-full shadow-lg",
-            props.className && props.className
-        )}>
-            {
-                props.disabled
-                    ?
-                    <div className='w-full flex place-content-center'>
-                        {props.icon}
-                    </div>
-                    :
-                    <Link href={props.link ?? ""} className='w-full flex place-content-center'>
-                        {props.icon}
-                    </Link>
-            }
-
-        </button>
-    )
-}
\ No newline at end of file
+  return (
+    <button
+      disabled={props.disabled}
+      className={clsx(
+        "h-32 w-32 rounded-full bg-gradient-to-r from-rose-700 to-rose-900 shadow-lg disabled:brightness-75 lg:h-44 lg:w-44",
+        props.className && props.className,
+      )}
+    >
+      {props.disabled ? (
+        <div className="flex w-full place-content-center">{props.icon}</div>
+      ) : (
+        <Link
+          href={props.link ?? ""}
+          className="flex w-full place-content-center"
+        >
+          {props.icon}
+        </Link>
+      )}
+    </button>
+  );
+}
diff --git a/src/components/button/ThemeButton.tsx b/src/components/button/ThemeButton.tsx
index f574782..f9097a9 100644
--- a/src/components/button/ThemeButton.tsx
+++ b/src/components/button/ThemeButton.tsx
@@ -1,38 +1,39 @@
-import { useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
-import { SunIcon } from '@components/icons/SunIcon';
-import { MoonIcon } from '@components/icons/MoonIcon';
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+import { SunIcon } from "@components/icons/SunIcon";
+import { MoonIcon } from "@components/icons/MoonIcon";
 
 export default function ThemeSwitch() {
-    const [mounted, setMounted] = useState(false);
-    const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
 
-    // useEffect only runs on the client, so now we can safely show the UI
-    useEffect(() => {
-        setMounted(true)
-    }, [])
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-    if (!mounted) {
-        return null
-    }
+  if (!mounted) {
+    return null;
+  }
 
-    function switchTheme() {
-        if (theme === 'light') {
-            setTheme('dark');
-        } else {
-            setTheme('light');
-        }
+  function switchTheme() {
+    if (theme === "light") {
+      setTheme("dark");
+    } else {
+      setTheme("light");
     }
+  }
 
-    return (
-
-        <button onClick={switchTheme} className="w-fit h-fit text-black dark:text-white ml-3 mt-3" >
-            {theme === "light"
-                ?
-                <SunIcon className='w-5 h-5' />
-                :
-                <MoonIcon className='w-5 h-5 dark:text-coolGray-390' />
-            }
-        </button>
-    );
-}
\ No newline at end of file
+  return (
+    <button
+      onClick={switchTheme}
+      className="ml-3 mt-3 h-fit w-fit text-black dark:text-white"
+    >
+      {theme === "light" ? (
+        <SunIcon className="h-5 w-5" />
+      ) : (
+        <MoonIcon className="dark:text-coolGray-390 h-5 w-5" />
+      )}
+    </button>
+  );
+}
diff --git a/src/components/countdown/CountDown.tsx b/src/components/countdown/CountDown.tsx
index 8874cb3..2232531 100644
--- a/src/components/countdown/CountDown.tsx
+++ b/src/components/countdown/CountDown.tsx
@@ -3,13 +3,12 @@ import { useEffect, useState } from "react";
 import NumberBox from "./NumberBox";
 
 interface time {
-    days: number | string;
-    hours: number | string;
-    minutes: number | string;
-    seconds: number | string;
+  days: number | string;
+  hours: number | string;
+  minutes: number | string;
+  seconds: number | string;
 }
 
-
 /**
  * CountDown component
  * @returns {JSX.Element} The Countdown element
@@ -19,81 +18,87 @@ interface time {
  * ```
  */
 export default function Countdown(): JSX.Element {
-    const toDay = dayjs();
-    const christmasDate = dayjs(`${dayjs().get('year')}-12-24`);
-    const [timeBeforeChristmas, setTimeBeforeChristmas] = useState<time>();
-
-    useEffect(() => {
-        const updateTime = setInterval(() => {
-            const difference = toDay.millisecond() - christmasDate.millisecond();
+  const toDay = dayjs();
+  const christmasDate = dayjs(`${dayjs().get("year")}-12-24`);
+  const [timeBeforeChristmas, setTimeBeforeChristmas] = useState<time>();
 
-            setTimeBeforeChristmas({
-                ...timeBeforeChristmas,
-                days: dayjs.duration(christmasDate.diff(toDay, "day"), "day").asDays(),
-                hours: 24 - toDay.hour(),
-                minutes: 60 - toDay.minute(),
-                seconds: 60 - toDay.second()
-            })
+  useEffect(() => {
+    const updateTime = setInterval(() => {
+      const difference = toDay.millisecond() - christmasDate.millisecond();
 
-            if (difference <= 0) {
-                clearInterval(updateTime);
-                setTimeBeforeChristmas({
-                    days: 0,
-                    hours: 0,
-                    minutes: 0,
-                    seconds: 0
-                })
-            }
+      setTimeBeforeChristmas({
+        ...timeBeforeChristmas,
+        days: dayjs.duration(christmasDate.diff(toDay, "day"), "day").asDays(),
+        hours: 24 - toDay.hour(),
+        minutes: 60 - toDay.minute(),
+        seconds: 60 - toDay.second(),
+      });
 
-        }, 1000);
+      if (difference <= 0) {
+        clearInterval(updateTime);
+        setTimeBeforeChristmas({
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+        });
+      }
+    }, 1000);
 
-        return () => {
-            clearInterval(updateTime);
-        };
-    });
-
-    if (timeBeforeChristmas) {
-        timeBeforeChristmas.days = zeroInFrontOfNumber(timeBeforeChristmas.days);
-        timeBeforeChristmas.hours = zeroInFrontOfNumber(timeBeforeChristmas.hours);
-        timeBeforeChristmas.minutes = zeroInFrontOfNumber(timeBeforeChristmas.minutes);
-        timeBeforeChristmas.seconds = zeroInFrontOfNumber(timeBeforeChristmas.seconds);
-    }
+    return () => {
+      clearInterval(updateTime);
+    };
+  });
 
+  if (timeBeforeChristmas) {
+    timeBeforeChristmas.days = zeroInFrontOfNumber(timeBeforeChristmas.days);
+    timeBeforeChristmas.hours = zeroInFrontOfNumber(timeBeforeChristmas.hours);
+    timeBeforeChristmas.minutes = zeroInFrontOfNumber(
+      timeBeforeChristmas.minutes,
+    );
+    timeBeforeChristmas.seconds = zeroInFrontOfNumber(
+      timeBeforeChristmas.seconds,
+    );
+  }
 
-    /**
-     * Used to set 0 before a number if the number is small the 10
-     *
-     * @param {(number | string)} number
-     * @returns {string}
-     * ```js
-     * // Examples:
-     * // If the number is smaller then 10
-     * let number: string = "7";
-     * number = zeroInFrontOfNumber(number); //07
-     * 
-     * // If the number is bigger then 10
-     * let number: string = "11" 
-     * number = zeroInFrontOfNumber(number); //11
-     * ```
-     */
-    function zeroInFrontOfNumber(number: number | string): string {
-        if (+number < 10) {
-            return "0" + +number;
-        }
-        return number.toString();
+  /**
+   * Used to set 0 before a number if the number is small the 10
+   *
+   * @param {(number | string)} number
+   * @returns {string}
+   * ```js
+   * // Examples:
+   * // If the number is smaller then 10
+   * let number: string = "7";
+   * number = zeroInFrontOfNumber(number); //07
+   *
+   * // If the number is bigger then 10
+   * let number: string = "11"
+   * number = zeroInFrontOfNumber(number); //11
+   * ```
+   */
+  function zeroInFrontOfNumber(number: number | string): string {
+    if (+number < 10) {
+      return "0" + +number;
     }
+    return number.toString();
+  }
 
-    return (
-
-        <div className="grid grid-cols-2 gap-4 py-6 px-10 md:flex md:items-center md:justify-between md:mt-2 rounded-xl md:px-6 md:py-8">
-            <NumberBox num={timeBeforeChristmas?.days ?? 0} unit="Days" />
-            <span className=" hidden text-5xl -mt-8 md:inline-block md:text-7xl font-normal text-gray-600 dark:text-gray-50">:</span>
-            <NumberBox num={timeBeforeChristmas?.hours ?? 0} unit="Hours" />
-            <span className="hidden text-5xl -mt-8 md:inline-block md:text-7xl font-normal text-gray-600 dark:text-gray-50">:</span>
-            <NumberBox num={timeBeforeChristmas?.minutes ?? 0} unit="Minutes" />
-            <span className="hidden text-5xl -mt-8 md:inline-block md:text-7xl font-normal text-gray-600 dark:text-gray-50">:</span>
-            <NumberBox num={timeBeforeChristmas?.seconds ?? 0} unit="Seconds" />
-        </div>
-
-    );
-}
\ No newline at end of file
+  return (
+    <div className="grid grid-cols-2 gap-4 rounded-xl px-10 py-6 md:mt-2 md:flex md:items-center md:justify-between md:px-6 md:py-8">
+      <NumberBox num={timeBeforeChristmas?.days ?? 0} unit="Days" />
+      <span className=" -mt-8 hidden text-5xl font-normal text-gray-600 dark:text-gray-50 md:inline-block md:text-7xl">
+        :
+      </span>
+      <NumberBox num={timeBeforeChristmas?.hours ?? 0} unit="Hours" />
+      <span className="-mt-8 hidden text-5xl font-normal text-gray-600 dark:text-gray-50 md:inline-block md:text-7xl">
+        :
+      </span>
+      <NumberBox num={timeBeforeChristmas?.minutes ?? 0} unit="Minutes" />
+      <span className="-mt-8 hidden text-5xl font-normal text-gray-600 dark:text-gray-50 md:inline-block md:text-7xl">
+        :
+      </span>
+      <NumberBox num={timeBeforeChristmas?.seconds ?? 0} unit="Seconds" />
+    </div>
+  );
+}
diff --git a/src/components/countdown/NumberBox.tsx b/src/components/countdown/NumberBox.tsx
index 1d18617..0c0f1fb 100644
--- a/src/components/countdown/NumberBox.tsx
+++ b/src/components/countdown/NumberBox.tsx
@@ -1,41 +1,40 @@
 interface Props {
-    num: string | number;
-    unit: string;
-};
-
+  num: string | number;
+  unit: string;
+}
 
 /**
  * NumberBox component used for display numbers in the countdown
  * @param {string | number} num The number you wish to be displayed
  * @param {string} unit The unit you wish to be displayed. Can fx. be "Days".
- * 
+ *
  * ```js
  * // Can be used like this:
  * <NumberBox num={24} unit="Days"/>
  * ```
  */
 export default function NumberBox(props: Props) {
-    return (
-        <div className="flex flex-col items-center mt-4 px-2">
-            <div className=" relative bg-transparent flex flex-col items-center justify-center rounded-lg w-32 h-32 text-2xl md:text-4xl mt-4 ">
-                <div className="rounded-t-lg rounded-b-lg bg-[#343650] w-full h-full" />
-
-                <div className={`text-5xl absolute text-rose-500 z-10 font-bold font-redhat md:text-7xl font-mono`}>
-                    {props.num}
-                </div>
+  return (
+    <div className="mt-4 flex flex-col items-center px-2">
+      <div className=" relative mt-4 flex h-32 w-32 flex-col items-center justify-center rounded-lg bg-transparent text-2xl md:text-4xl ">
+        <div className="h-full w-full rounded-b-lg rounded-t-lg bg-[#343650]" />
 
-                <div className=" rounded-b-lg rounded-t-lg bg-[#2c2e3f] w-full h-full" />
+        <div
+          className={`font-mono absolute z-10 font-redhat text-5xl font-bold text-rose-500 md:text-7xl`}
+        >
+          {props.num}
+        </div>
 
-                <div className={`absolute w-full h-1/2 top-0 rounded-t-lg z-5`} />
-                {/* Two Small Dots */}
-                <div className="absolute -right-1 top-[60px] rounded-full w-[12px] h-[12px] bg-[#1e1f29]" />
-                <div className="absolute -left-1 top-[60px] rounded-full w-[12px] h-[12px] bg-[#1e1f29]" />
+        <div className=" h-full w-full rounded-b-lg rounded-t-lg bg-[#2c2e3f]" />
 
-            </div>
-            <p className="text-lg mt-3 font-semibold text-black dark:text-rose-200 md:text-2xl ">
-                {props.unit}
-            </p>
-        </div>
-    );
+        <div className={`z-5 absolute top-0 h-1/2 w-full rounded-t-lg`} />
+        {/* Two Small Dots */}
+        <div className="absolute -right-1 top-[60px] h-[12px] w-[12px] rounded-full bg-[#1e1f29]" />
+        <div className="absolute -left-1 top-[60px] h-[12px] w-[12px] rounded-full bg-[#1e1f29]" />
+      </div>
+      <p className="mt-3 text-lg font-semibold text-black dark:text-rose-200 md:text-2xl ">
+        {props.unit}
+      </p>
+    </div>
+  );
 }
-
diff --git a/src/components/icons/ChevronRightIcon copy.tsx b/src/components/icons/ChevronRightIcon copy.tsx
index 9938bd6..6667fac 100644
--- a/src/components/icons/ChevronRightIcon copy.tsx	
+++ b/src/components/icons/ChevronRightIcon copy.tsx	
@@ -1,8 +1,7 @@
 interface IconProps {
-    className?: string;
+  className?: string;
 }
 
-
 /**
  * Can be found on heroicons via Outline and the name "chevron-left"
  * @param {IconProps} props
@@ -10,11 +9,21 @@ interface IconProps {
  * @returns Chevron Left Icon
  */
 export default function ChevronLeftIcon(props: IconProps) {
-    return (
-        <div className={props.className}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-            </svg>
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className={props.className}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M15.75 19.5L8.25 12l7.5-7.5"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/icons/ChevronRightIcon.tsx b/src/components/icons/ChevronRightIcon.tsx
index 2e4e9b0..bc2f2cd 100644
--- a/src/components/icons/ChevronRightIcon.tsx
+++ b/src/components/icons/ChevronRightIcon.tsx
@@ -1,8 +1,7 @@
 interface IconProps {
-    className?: string;
+  className?: string;
 }
 
-
 /**
  * Can be found on heroicons via Outline and the name "chevron-right"
  * @param {IconProps} props
@@ -10,11 +9,21 @@ interface IconProps {
  * @returns Chevron Right Icon
  */
 export default function ChevronRightIcon(props: IconProps) {
-    return (
-        <div className={props.className}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-            </svg>
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className={props.className}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M8.25 4.5l7.5 7.5-7.5 7.5"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/icons/MoonIcon.tsx b/src/components/icons/MoonIcon.tsx
index b274bc0..1d2d1e1 100644
--- a/src/components/icons/MoonIcon.tsx
+++ b/src/components/icons/MoonIcon.tsx
@@ -1,8 +1,7 @@
 interface IconProps {
-    className?: string;
+  className?: string;
 }
 
-
 /**
  * Can be find heroicons via Outline and the name "moon"
  * @param {IconProps} props
@@ -10,11 +9,21 @@ interface IconProps {
  * @returns moon icon
  */
 export function MoonIcon(props: IconProps) {
-    return (
-        <div className={props.className}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
-            </svg>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={props.className}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={2}
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/icons/SunIcon.tsx b/src/components/icons/SunIcon.tsx
index 47bb277..24c2115 100644
--- a/src/components/icons/SunIcon.tsx
+++ b/src/components/icons/SunIcon.tsx
@@ -1,8 +1,7 @@
 interface IconProps {
-    className?: string;
+  className?: string;
 }
 
-
 /**
  * Can be find heroicons via Outline and the name "sun"
  * @param {IconProps} props
@@ -10,11 +9,21 @@ interface IconProps {
  * @returns sun icon
  */
 export function SunIcon(props: IconProps) {
-    return (
-        <div className={props.className}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
-            </svg>
-        </div>
-    )
+  return (
+    <div className={props.className}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={2}
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+        />
+      </svg>
+    </div>
+  );
 }
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 52f3a7d..ce32162 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -2,25 +2,25 @@ import ThemeSwitch from "@components/button/ThemeButton";
 import Snow from "../snow";
 
 interface Props {
-    children: JSX.Element;
+  children: JSX.Element;
 }
 
 /**
  * Layout Used before all other things can load
- * @param props 
+ * @param props
  */
 export default function Layout(props: Props) {
-    return (
-        <>
-            <div className="bg-white dark:bg-black h-full w-full">
-                <div className="flex flex-row h-full w-full">
-                    <ThemeSwitch />
-                    <div id="layout" className="h-full w-full overflow-x-hidden z-10">
-                        {props.children}
-                    </div>
-                </div>
-                <Snow />
-            </div>
-        </>
-    );
-}
\ No newline at end of file
+  return (
+    <>
+      <div className="h-full w-full bg-white dark:bg-black">
+        <div className="flex h-full w-full flex-row">
+          <ThemeSwitch />
+          <div id="layout" className="z-10 h-full w-full overflow-x-hidden">
+            {props.children}
+          </div>
+        </div>
+        <Snow />
+      </div>
+    </>
+  );
+}
diff --git a/src/components/snow.tsx b/src/components/snow.tsx
index 7cb1346..76c8fc8 100644
--- a/src/components/snow.tsx
+++ b/src/components/snow.tsx
@@ -5,29 +5,28 @@ import Snowfall from "react-snowfall";
  * Used for workaround the useLayoutEffect error
  */
 function Child() {
-        useLayoutEffect(() => {
-                return
-        });
-        return <Snowfall snowflakeCount={373} />
+  useLayoutEffect(() => {
+    return;
+  });
+  return <Snowfall snowflakeCount={373} />;
 }
 
-
 /**
  * Snow component
- * @returns {JSX.Element} Html snow element 
+ * @returns {JSX.Element} Html snow element
  */
 export default function Snow(): JSX.Element {
-        const [showChild, setShowChild] = useState(false);
+  const [showChild, setShowChild] = useState(false);
 
-        // Wait until after client-side hydration to show
-        useEffect(() => {
-                setShowChild(true);
-        }, []);
+  // Wait until after client-side hydration to show
+  useEffect(() => {
+    setShowChild(true);
+  }, []);
 
-        if (!showChild) {
-                // You can show some kind of placeholder UI here
-                return <></>
-        }
+  if (!showChild) {
+    // You can show some kind of placeholder UI here
+    return <></>;
+  }
 
-        return <Child />
+  return <Child />;
 }
diff --git a/src/core/utils.ts b/src/core/utils.ts
index d21b272..d75db4c 100644
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -3,7 +3,7 @@
  * @template T
  * @param {T[]} array Can take any type you want of arrays
  * @returns {T[]} a shuffled
- * 
+ *
  * ```js
  * // Can be used like this
  * const sortArray = [1, 2, 3, 4, 5, 6];
@@ -11,19 +11,21 @@
  * ```
  */
 export function shuffle<T>(array: T[]): T[] {
-    let currentIndex = array.length, randomIndex;
-
-    while (currentIndex != 0) {
-
-        randomIndex = Math.floor(Math.random() * currentIndex);
-        currentIndex--;
+  let currentIndex = array.length,
+    randomIndex;
 
-        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
-    }
+  while (currentIndex != 0) {
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
 
-    return array;
-};
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex],
+      array[currentIndex],
+    ];
+  }
 
+  return array;
+}
 
 /**
  * Get a random number
@@ -33,7 +35,7 @@ export function shuffle<T>(array: T[]): T[] {
  * @returns {number}
  */
 export function getRandomInt(min: number, max: number) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min) + min);
-}
\ No newline at end of file
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min) + min);
+}
diff --git a/src/pages/[id].tsx b/src/pages/[id].tsx
index 72dd49a..b934f93 100644
--- a/src/pages/[id].tsx
+++ b/src/pages/[id].tsx
@@ -1,55 +1,74 @@
 /* eslint-disable @next/next/no-img-element */
 import ChevronLeftIcon from "@components/icons/ChevronRightIcon copy";
 import { GetStaticProps } from "next";
-import { Inter } from "next/font/google"
+import { Inter } from "next/font/google";
 import Link from "next/link";
 import getConfig from "next/config";
 import SimpleButton from "@components/button/SimpleButton";
 
-const inter = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ["latin"] });
 const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
 
-
-export default function memePage(props: { image: string, error: boolean }) {
-
-    return (
-        <main className={`flex min-h-screen h-full flex-col items-center ${inter.className}`}>
-            <div className="flex justify-center w-full h-full place-items-center">
-                <SimpleButton link="calender" className="invisible absolute lg:static lg:visible"
-                    icon={<ChevronLeftIcon className='mr-4 h-16 w-16 lg:w-28 lg:h-28 text-right' />} />
-                <center className="flex flex-col h-full justify-center p-3">
-                    {
-                        props.error
-                            ?
-                            <div className="text-7xl text-black dark:text-white">
-                                <h1>You are not</h1>
-                                <h1>ready for this</h1>
-                            </div>
-                            :
-                            <img className="border-2 border-black dark:border-white md:w-fit md:h-fit xl:h-full md:object-contain m-2" src={`data:image/jpg;base64,${props.image}`} alt="dev meme" />
-                    }
-                    <div className="visible static lg:absolute lg:invisible">
-                        <SimpleButton link="calender" icon={<ChevronLeftIcon className='mr-4 h-16 w-16 lg:w-28 lg:h-28 text-right text-white' />} />
-                    </div>
-                </center>
+export default function memePage(props: { image: string; error: boolean }) {
+  return (
+    <main
+      className={`flex h-full min-h-screen flex-col items-center ${inter.className}`}
+    >
+      <div className="flex h-full w-full place-items-center justify-center">
+        <SimpleButton
+          link="calender"
+          className="invisible absolute lg:visible lg:static"
+          icon={
+            <ChevronLeftIcon className="mr-4 h-16 w-16 text-right lg:h-28 lg:w-28" />
+          }
+        />
+        <center className="flex h-full flex-col justify-center p-3">
+          {props.error ? (
+            <div className="text-7xl text-black dark:text-white">
+              <h1>You are not</h1>
+              <h1>ready for this</h1>
             </div>
-        </main>
-    )
+          ) : (
+            <img
+              className="m-2 border-2 border-black dark:border-white md:h-fit md:w-fit md:object-contain xl:h-full"
+              src={`data:image/jpg;base64,${props.image}`}
+              alt="dev meme"
+            />
+          )}
+          <div className="visible static lg:invisible lg:absolute">
+            <SimpleButton
+              link="calender"
+              icon={
+                <ChevronLeftIcon className="mr-4 h-16 w-16 text-right text-white lg:h-28 lg:w-28" />
+              }
+            />
+          </div>
+        </center>
+      </div>
+    </main>
+  );
 }
 
 export const getServerSideProps = (async (context) => {
-    const data = { props: { image: "" as string, error: false as boolean } };
+  const data = { props: { image: "" as string, error: false as boolean } };
 
-    const response = await fetch(`${publicRuntimeConfig.URL || serverRuntimeConfig.URL || "http://localhost:3000/"}${context.params!.id}`, {
-        method: "GET"
-    })
-    if (response.ok) {
-        const json = await response.json();
-
-        data.props.image = json!.image;
-        return data;
-    }
-    data.props.error = true;
+  const response = await fetch(
+    `${
+      publicRuntimeConfig.URL ||
+      serverRuntimeConfig.URL ||
+      "http://localhost:3000/"
+    }${context.params!.id}`,
+    {
+      method: "GET",
+    },
+  );
+  if (response.ok) {
+    const json = await response.json();
 
+    data.props.image = json!.image;
     return data;
-}) satisfies GetStaticProps;
\ No newline at end of file
+  }
+  data.props.error = true;
+
+  return data;
+}) satisfies GetStaticProps;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 8e0b5d2..4758b45 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,32 +1,32 @@
-import '@/styles/globals.css'
-import dayjs from 'dayjs';
-import type { AppProps } from 'next/app'
-import Head from 'next/head';
+import "@/styles/globals.css";
+import dayjs from "dayjs";
+import type { AppProps } from "next/app";
+import Head from "next/head";
 import duration from "dayjs/plugin/duration";
 import weekOfYear from "dayjs/plugin/weekOfYear";
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
-import Layout from '@components/layout/Layout';
-import { ThemeProvider } from 'next-themes';
-
+import Layout from "@components/layout/Layout";
+import { ThemeProvider } from "next-themes";
 
 export default function App({ Component, pageProps }: AppProps) {
   dayjs.extend(duration);
   dayjs.extend(isSameOrBefore);
-  dayjs.extend(weekOfYear)
+  dayjs.extend(weekOfYear);
 
   return (
-
-    <main id="root-container" className='h-screen w-screen'>
-
+    <main id="root-container" className="h-screen w-screen">
       <Head>
         <title>Meme Christmas Calendar</title>
-        <meta name="description" content="Make the christmas time more fun with the best memes in the best time" />
+        <meta
+          name="description"
+          content="Make the christmas time more fun with the best memes in the best time"
+        />
       </Head>
-      <ThemeProvider attribute="class" defaultTheme='light'>
+      <ThemeProvider attribute="class" defaultTheme="light">
         <Layout>
           <Component {...pageProps} />
         </Layout>
       </ThemeProvider>
-    </main >
+    </main>
   );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 54e8bf3..b2fff8b 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/src/pages/api/[id].tsx b/src/pages/api/[id].tsx
index f1bff54..4901e98 100644
--- a/src/pages/api/[id].tsx
+++ b/src/pages/api/[id].tsx
@@ -1,22 +1,21 @@
-import { getRandomInt } from '@utils';
-import dayjs from 'dayjs'
-import type { NextApiRequest, NextApiResponse } from 'next'
+import { getRandomInt } from "@utils";
+import dayjs from "dayjs";
+import type { NextApiRequest, NextApiResponse } from "next";
 import duration from "dayjs/plugin/duration";
-import { readFileSync } from 'fs';
+import { readFileSync } from "fs";
 
 dayjs.extend(duration);
 
 export const config = {
   api: {
     bodyParser: {
-      sizeLimit: '10kb',
+      sizeLimit: "10kb",
     },
     responseLimit: 716800,
   },
   // Specifies the maximum allowed duration for this function to execute (in seconds)
   maxDuration: 5,
-}
-
+};
 
 /**
  * Check if it december and if the day is today or before
@@ -31,7 +30,6 @@ async function handleDayCheck(day: number): Promise<boolean> {
   return false;
 }
 
-
 /**
  * Checks if the day is a weekend or not
  *
@@ -49,7 +47,7 @@ async function dayOfTheWeekCheck(day: number): Promise<"weekend" | "day"> {
 async function weekOfTheMonth(day: string): Promise<string> {
   const firstWeek = dayjs(day).week();
   const lastWeek = dayjs(`${dayjs().year()}-12-24`).week();
-  return (lastWeek - firstWeek === 0 ? "5" : (lastWeek - firstWeek).toString());
+  return lastWeek - firstWeek === 0 ? "5" : (lastWeek - firstWeek).toString();
 }
 
 /**
@@ -59,7 +57,10 @@ async function weekOfTheMonth(day: string): Promise<string> {
  * @param {NextApiResponse} res
  * @returns {*}
  */
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
   const { id } = req.query;
   if (!id) {
     return res.status(500).json({ error: "Day not set" });
@@ -67,23 +68,28 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   if (+id > 24) {
     return res.status(500).json({ error: "Number is over 24" });
   }
-  if (req.method === 'GET' && await handleDayCheck(+id)) {
-    const random1 = getRandomInt(1, await dayOfTheWeekCheck(+id) === "day" ? 4 : 8);
+  if (req.method === "GET" && (await handleDayCheck(+id))) {
+    const random1 = getRandomInt(
+      1,
+      (await dayOfTheWeekCheck(+id)) === "day" ? 4 : 8,
+    );
     if (random1 > 4) {
-      const weekOfTheMonth1 = await weekOfTheMonth(dayjs().month(11).date(+id).format("YYYY-MM-DD"));
+      const weekOfTheMonth1 = await weekOfTheMonth(
+        dayjs().month(11).date(+id).format("YYYY-MM-DD"),
+      );
       const random = getRandomInt(1, 2);
-      const imgPath = `./src/images/weekends/${weekOfTheMonth1}/${random}/dev/${random1 - 4}.jpg`;
+      const imgPath = `./src/images/weekends/${weekOfTheMonth1}/${random}/dev/${
+        random1 - 4
+      }.jpg`;
       const imageBuffer = readFileSync(imgPath);
-      const base64Image = Buffer.from(imageBuffer).toString('base64');
+      const base64Image = Buffer.from(imageBuffer).toString("base64");
       return res.status(200).json({ image: base64Image });
-
-
     }
     const imgPath = `./src/images/${+id}/dev/${random1}.jpg`;
     const imageBuffer = readFileSync(imgPath);
-    const base64Image = Buffer.from(imageBuffer).toString('base64');
+    const base64Image = Buffer.from(imageBuffer).toString("base64");
     return res.status(200).json({ image: base64Image });
   } else {
     return res.status(500).json({ error: "Unexpected error" });
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/calender.tsx b/src/pages/calender.tsx
index 2c13d39..a33fcf7 100644
--- a/src/pages/calender.tsx
+++ b/src/pages/calender.tsx
@@ -1,36 +1,50 @@
-import dayjs from "dayjs"
-import { Inter } from "next/font/google"
+import dayjs from "dayjs";
+import { Inter } from "next/font/google";
 import Link from "next/link";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function calender() {
-    const toDay = dayjs();
-    const days = [1, 19, 18, 5, 23, 7, 3, 15, 22, 9, 2, 4, 14, 11, 21, 13, 8, 12, 20, 17, 16, 10, 6, 24];
-    return (
-        <main className={`flex min-h-screen h-full flex-col items-center ${inter.className}`}>
-            <div className="grid grid-cols-4 lg:grid-cols-6 w-full h-full place-items-center mb-20">
-                {
-                    days.map(day => {
-                        // If the day is after 24 december fx. if it is the 26 december set the day to 24 else set the day to current day in the loop.
-                        const days = dayjs().month(11).date(toDay.month() === 11 && toDay.date() > 24 ? 24 : day).hour(0).minute(0).second(0).millisecond(0).isSameOrBefore(dayjs(toDay));
-                        const style = "text-red-600 text-center w-14 h-14 lg:w-[7vw] lg:h-[7vw] flex flex-col justify-center border-black dark:border-white border-l border-r border-y border-l-dashed bg-white bg-opacity-40 text-xl"
-                        if (days) {
-                            return (
-                                <Link href={"/" + day} key={day} className={`cursor-pointer hover:bg-gray-100 dark:hover:bg-opacity-60 ${style}`}>
-                                    <p>{day}</p>
-                                </Link>
-                            );
-                        }
-                        return (
-                            <div key={day} className={`cursor-not-allowed ${style}`}>
-                                <p>{day}</p>
-                            </div>
-                        );
-                    }
-                    )
-                }
+  const toDay = dayjs();
+  const days = [
+    1, 19, 18, 5, 23, 7, 3, 15, 22, 9, 2, 4, 14, 11, 21, 13, 8, 12, 20, 17, 16,
+    10, 6, 24,
+  ];
+  return (
+    <main
+      className={`flex h-full min-h-screen flex-col items-center ${inter.className}`}
+    >
+      <div className="mb-20 grid h-full w-full grid-cols-4 place-items-center lg:grid-cols-6">
+        {days.map((day) => {
+          // If the day is after 24 december fx. if it is the 26 december set the day to 24 else set the day to current day in the loop.
+          const days = dayjs()
+            .month(11)
+            .date(toDay.month() === 11 && toDay.date() > 24 ? 24 : day)
+            .hour(0)
+            .minute(0)
+            .second(0)
+            .millisecond(0)
+            .isSameOrBefore(dayjs(toDay));
+          const style =
+            "text-red-600 text-center w-14 h-14 lg:w-[7vw] lg:h-[7vw] flex flex-col justify-center border-black dark:border-white border-l border-r border-y border-l-dashed bg-white bg-opacity-40 text-xl";
+          if (days) {
+            return (
+              <Link
+                href={"/" + day}
+                key={day}
+                className={`cursor-pointer hover:bg-gray-100 dark:hover:bg-opacity-60 ${style}`}
+              >
+                <p>{day}</p>
+              </Link>
+            );
+          }
+          return (
+            <div key={day} className={`cursor-not-allowed ${style}`}>
+              <p>{day}</p>
             </div>
-        </main>
-    )
-}
\ No newline at end of file
+          );
+        })}
+      </div>
+    </main>
+  );
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 895db06..2e7ba42 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,27 +1,40 @@
-import SimpleButton from '@components/button/SimpleButton';
-import Countdown from '@components/countdown/CountDown'
-import ChevronRightIcon from '@components/icons/ChevronRightIcon'
-import dayjs from 'dayjs';
-import { Inter } from 'next/font/google'
+import SimpleButton from "@components/button/SimpleButton";
+import Countdown from "@components/countdown/CountDown";
+import ChevronRightIcon from "@components/icons/ChevronRightIcon";
+import dayjs from "dayjs";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   const toDay = dayjs();
-  const days = !dayjs().month(11).date(toDay.month() === 11 && toDay.date() > 24 ? 24 : toDay.date()).hour(0).minute(0).second(0).millisecond(0).isSameOrBefore(dayjs(toDay));
+  const days = !dayjs()
+    .month(11)
+    .date(toDay.month() === 11 && toDay.date() > 24 ? 24 : toDay.date())
+    .hour(0)
+    .minute(0)
+    .second(0)
+    .millisecond(0)
+    .isSameOrBefore(dayjs(toDay));
   return (
     <main
       className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
     >
       <div>
-        <h1 className=' text-5xl text-center font-semibold flex place-content-center text-black dark:text-white'>
-          <div className='invisible md:visible'>🎅</div>
+        <h1 className=" flex place-content-center text-center text-5xl font-semibold text-black dark:text-white">
+          <div className="invisible md:visible">🎅</div>
           Time Before Christmas
-          <div className='invisible md:visible'>🎅</div>
+          <div className="invisible md:visible">🎅</div>
         </h1>
         <Countdown />
-        <div className='h-full flex justify-center place-content-center mb-8 xl:mt-8'>
-          <SimpleButton link="calender" disabled={days} icon={<ChevronRightIcon className='ml-3 h-16 w-16 lg:w-28 lg:h-28 text-right text-white' />} />
+        <div className="mb-8 flex h-full place-content-center justify-center xl:mt-8">
+          <SimpleButton
+            link="calender"
+            disabled={days}
+            icon={
+              <ChevronRightIcon className="ml-3 h-16 w-16 text-right text-white lg:h-28 lg:w-28" />
+            }
+          />
         </div>
       </div>
     </main>