From e6355cc1ac20d2f7ed468339b631f57cb13660c4 Mon Sep 17 00:00:00 2001
From: KaroGil <karolinkagil@gmail.com>
Date: Sat, 29 Mar 2025 21:15:14 +0100
Subject: [PATCH] add ducks

---
 components/animation/animatedIcons.tsx |  11 ++++--
 components/header.tsx                  |  48 ++++++++++++++++++-------
 public/duck.png                        | Bin 0 -> 2969 bytes
 3 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 public/duck.png

diff --git a/components/animation/animatedIcons.tsx b/components/animation/animatedIcons.tsx
index 014c1f6..8078f8b 100644
--- a/components/animation/animatedIcons.tsx
+++ b/components/animation/animatedIcons.tsx
@@ -5,9 +5,11 @@ import Image from "next/image";
 import { motion } from "framer-motion";
 import turtle from "@/public/turtle.png";
 import type { StaticImageData } from "next/image";
+import duck from "@/public/duck.png";
 
 type AnimatedIconsProps = {
   n: number;
+  bade?: boolean;
   children: React.ReactNode;
 };
 
@@ -16,7 +18,7 @@ type IconData = {
   y: string;
 };
 
-export const AnimatedIcons = ({ n, children }: AnimatedIconsProps) => {
+export const AnimatedIcons = ({ n, bade, children }: AnimatedIconsProps) => {
   const [iconsData, setIconsData] = useState<IconData[]>([]);
 
   useEffect(() => {
@@ -27,6 +29,11 @@ export const AnimatedIcons = ({ n, children }: AnimatedIconsProps) => {
     setIconsData(generated);
   }, [n]);
 
+  let icon = turtle;
+  if (bade) {
+    icon = duck;
+  }
+
   return (
     <div className="relative">
       <div className="relative z-10">{children}</div>
@@ -38,7 +45,7 @@ export const AnimatedIcons = ({ n, children }: AnimatedIconsProps) => {
             yOffset={pos.y}
             delay={index * 0.5}
             repeatDelay={5}
-            icon={turtle}
+            icon={icon}
           />
         ))}
       </div>
diff --git a/components/header.tsx b/components/header.tsx
index 7fc3ce6..c5617f1 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -5,23 +5,37 @@ import AuthButtons from "@/components/authButtons";
 import { usePathname } from "next/navigation";
 import { getInterestBySlug } from "./types/interests";
 import { getEventById } from "./types/post";
+import { useEffect, useState } from "react";
+import { AnimatedIcons } from "@/components/animation/animatedIcons";
 
 export function Header() {
   const pathname = usePathname();
 
-  let title = "...KOMPIS";
-
-  if (pathname.startsWith("/hobbies/")) {
-    const hobby = pathname.split("/")[2];
-    const name = getInterestBySlug(hobby);
-    title = `${name?.infinitiv?.toUpperCase()}kompis`;
-  }
-  if (pathname.startsWith("/event/")) {
-    const id = pathname.split("/")[2];
-    const event = getEventById(parseInt(id));
-    title = `${event?.hobby.infinitiv}kompis`;
-  }
-  return (
+  const [bade, setBade] = useState(false);
+  const [title, setTitle] = useState("...KOMPIS");
+
+  useEffect(() => {
+    if (pathname.startsWith("/hobbies/")) {
+      const hobby = pathname.split("/")[2];
+      const name = getInterestBySlug(hobby);
+      console.log("Got hobby name:", name);
+
+      setTitle(`${name?.infinitiv?.toUpperCase()}kompis`);
+      if (name?.name == "Bading") {
+        setBade(true);
+      }
+    } else if (pathname.startsWith("/event/")) {
+      const id = pathname.split("/")[2];
+      const event = getEventById(parseInt(id));
+      setTitle(`${event?.hobby.infinitiv}kompis`);
+      setBade(false);
+    } else {
+      setTitle("...KOMPIS");
+      setBade(false);
+    }
+  }, [pathname]);
+
+  const headerContent = (
     <header className="w-full bg-black text-background px-4 py-12">
       <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center md:items-center justify-between relative">
         <Link
@@ -37,4 +51,12 @@ export function Header() {
       </div>
     </header>
   );
+
+  return bade ? (
+    <AnimatedIcons n={10} bade={bade}>
+      {headerContent}
+    </AnimatedIcons>
+  ) : (
+    headerContent
+  );
 }
diff --git a/public/duck.png b/public/duck.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e8f930e100ff8027326631c22f37e1214bf15dc
GIT binary patch
literal 2969
zcmeH}Yfuwc6o7YccH@!&1_?w+fki8#Kw%6T&?zo20R<+2@<!tXli0C{A_x}i#v)2V
zL`5(HH4Hv#i&#bl94!PL9x7<8Rw#mv;;Vy{Shb*1?BTzEI%EIwV`uK%nS1Uz-~G<L
zTOf-JvEbSBFbuN@3k{0KFkC+QQCyhWwYDZ4!}#*BApe!w`0zme-d`CZX&}E0U&fJ<
z-q@-rQK&d@Ij1Cstld)?|5s9XZ^qH-x61E2w)l=_JWhS(<TyT?VKE#Llz^TZP({|+
z3)AMgSv{L=8hUrKMUwS$Vo>`2sZyU`_h#{yG=(+I(5o4|BSg(1sAD`=<DExc5iE0w
zMaBCJTuKmXBh#O{s;$5@**N)$Q?-SFE}5@mV-8BBIC_D2K7IjW2(gO6Pr9hm5b=-{
zrsw7@Vp!$}R<R#eUUc^w%HEVy@{QD|Ay+VeY{5o->jS$gOtS$eE31zFVJ4t#Wgl@W
z+x)wMXN05D!SicBZf^W&PX3ji=Iw8D#u7z;i%i`9rHUn=GV&;#yrlMOpT+1}SoG)7
zdWRYGPv5g>wf9Vg6>V6<;G;KtEzJb+D;eC=zNnrOJoD7C?^GLh6O=oYFS2NlC#Y8<
znf@P1Lm(n-fl?t?;f{#6{IOM!ChQvTKd7zgJZp&c`F8xtb*J|uDl$2_N1Sfe^%%sQ
zIY-BageC3<O@nbVnaJ=3UzeG=8lw)}bp~`%3@&O-j$|=S6yjx<9?JxmWkQ)g*sC1Q
zOJ2$%$2sdAKye|^{y@l(8HMtK^0?w5zxVd(_eO%+st=qUY_sv`Nh2@e8yDufFs!}+
z@y3ES?3)F{SmuA2)D73)9(Ea-$hm9PpU_dJ>b`h+R9^NQ?<+}Qie8*P(B&`*VwR5G
z?Uk4ZATj}jG-Dco$fsP5&PBG9AW|5-r@P-DKsW;kswQ|61W?bEY=!QY?*R~()m8xF
z4uJST$dLU*%1v9h`1OfJ%ht*}%J}is<=Z%x7B_kc>Ji`7IBq@+v1MSkePz9wpc6vB
zvFpQeR1Ic(`#^V;z`4JaoZ}!O0Jc!4x4SSj=<!sgo<>l4&@TpK5%fzli*DRBSW*JY
zCSB<3-ISn+EB0u4XL@a#*|H<oFZVQm2o-zubjLPb5u14P4r?$?5-d(?PrFS}wX}|n
z3vD$gsQzdM|9wGLg$pAm!O#Gnl4gu$a8hOU_q=iB24rlay*M~(1RENQ22OyY{tSMm
zWTzb^XgbcK=5@~(MX-7v+UI7zHa}c*?Zv|z9c4>KJYH64CFiBa%G&VdEF;0mes|eD
zXNC@eQc~ANBjO0yr_}UW;>Z_DpX+vT25ksua4G*z7A5GklIeXDw56CviFi#3x`sfO
zDTa!#UOPrm-qtdGH#!eGZYIX(Z;p(;9+CKle0<GxsOINGnW~f|-vcSyR!@hxa|_PA
z=2mJePMHbRP_Z~q%_pc-pwQJH4hT7r6djZVmq`qRtDY#oK!iQi%XRKUIMPB=5^0Pz
zZD1fN>Xt1e1qiekv_~)v7n1Vd(*VAlU~4+H7uq5|AL`v~pEuaHzM#9RM{G)7^W$XS
z#4-5DFJnNDcmlg#XpWr=^4GEG{_z*nz@aW^;*9O5C)+Ls;I9~*4u&3f)3HzACRTx=
z7eT@Db|+BK3nJZoeSR@S$|8lP&-N~zw6P90hxHRkb53!+SkywNHjcxM^SltAAx$A6
zGzFU+SHROmK40=tW~QFFsds+rA7`oy{&N>B)a<BpTE5LLT2~6c+*nv}WKdmzeCNMd
CHS`<+

literal 0
HcmV?d00001