Add santa

img/ImageComponents.ts

@@ -68,6 +68,7 @@ import CheckboxPng from "./png/check-box-1.png";
 import KalenderPng from "./png/kalender.png";
 import KalenderHoverPng from "./png/kalender--hover.png";
 import PilForrigeBlaaPng from "./png/pilForrige--blaa.png";
+import SantaTransparent from "./png/santa_transparent.png";
 
 // GIF
 import EasterRoll from "./gif/easter_roll.gif";
@@ -141,4 +142,5 @@ export {
   PilForrigeBlaaPng,
   UtropstegnImage,
   SaveFile,
+  SantaTransparent,
 };

src/components/Santa.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { SantaTransparent } from "../../img/ImageComponents";
+
+export const Santa = () => {
+  const [animation, setAnimation] = React.useState("none");
+
+  const setRandomAnimationType = () => {
+    const animationTypes = ["spin", "ping", "pulse", "bounce"].filter(
+      (type) => type !== animation
+    );
+    setAnimation(
+      animationTypes[Math.floor(Math.random() * animationTypes.length)]
+    );
+    console.log("AMI: ", animation);
+  };
+
+  return (
+    <div
+      className="flex flex-row items-center"
+      onClick={setRandomAnimationType}
+    >
+      <img
+        className={`pl-2 w-10 animate-[${animation}_1s_ease-in-out]`}
+        src={SantaTransparent}
+        alt={"nisse"}
+      />
+    </div>
+  );
+};

src/sider/Side.tsx

@@ -5,7 +5,7 @@ import {
   GlobalNavigasjon,
   Menypunkter,
 } from "@/components/globalnavigasjon/GlobalNavigasjon";
-import { isEaster, isPride } from "@/utils/festiveUtils";
+import { isDecember, isEaster, isPride } from "@/utils/festiveUtils";
 import { Easter } from "@/components/festive/Easter";
 import * as Amplitude from "@/utils/amplitude";
 import { EventType } from "@/utils/amplitude";
@@ -14,6 +14,7 @@ import { Pride } from "@/components/festive/Pride";
 import { Oppfolgingsoppgave } from "@/components/oppfolgingsoppgave/Oppfolgingsoppgave";
 import { useDiskresjonskodeQuery } from "@/data/diskresjonskode/diskresjonskodeQueryHooks";
 import { TildeltVeileder } from "@/components/TildeltVeileder";
+import { Santa } from "@/components/Santa";
 
 export const MODIA_HEADER_ID = "modia-header";
 
@@ -48,6 +49,7 @@ export default function Side({
         <div className="flex flex-col" id={MODIA_HEADER_ID}>
           <div className="flex flex-row mt-4 mb-2 w-full">
             <OversiktLenker />
+            {isDecember() && <Santa />}
             <TildeltVeileder />
           </div>
           {isPride() && <Pride>&nbsp;</Pride>}

src/utils/festiveUtils.ts

@@ -12,7 +12,7 @@ enum Month {
   DECEMBER = 11,
 }
 
-const isDecember = () => {
+export const isDecember = () => {
   const currentMonth = new Date().getMonth();
 
   return currentMonth === Month.DECEMBER;