add ducks

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>

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
+  );
 }