feat: reactive nav buttons

src/app/components/LottieIcon.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Lottie from "react-lottie-player";
+
+type IconProps = {
+  isPlaying: boolean;
+  index: number;
+  json: object;
+};
+
+const Icon: React.FC<IconProps> = ({ isPlaying, index, json }) => {
+  return (
+    <Lottie
+      key={index}
+      animationData={json}
+      play={isPlaying}
+      loop={false}
+      style={{ width: 20, height: 20, fill: "white" }}
+      rendererSettings={{ preserveAspectRatio: "xMidYMid slice" }}
+    />
+  );
+};
+
+export default Icon;

src/app/components/ReactiveButton.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+import LottieIcon from "~/app/components/LottieIcon";
+
+function classNames(...classes: string[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+const Button: React.FC<{
+  href: string;
+  current: boolean;
+  name: string;
+  json: object;
+}> = ({ href, current, name, json }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [index, setIndex] = useState(0);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    setIndex((index) => index + 1);
+  };
+
+  return (
+    <Link
+      href={href}
+      onMouseEnter={handleMouseEnter}
+      className={classNames(
+        current ? "bg-dark-200 text-white" : "bg-dark-200 text-white",
+        "group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-dark-1000",
+      )}
+    >
+      <LottieIcon index={index} json={json} isPlaying={isHovered} />
+      {name}
+    </Link>
+  );
+};
+
+export default Button;