feat: updated nav ui based on feedback

2026-10-16 01:05:40 +00:00 · 2025-01-20 22:59:00 +05:30
parent 934ef8ab27
commit 23513158ed
154 changed files with 2619 additions and 2740 deletions
@@ -0,0 +1,60 @@
+import { ComponentPropsWithRef, ElementType, useRef } from "react";
+import { DotLottie, DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { twMerge } from "tailwind-merge";
+
+import { MenuItemProps } from "@app/components/v2";
+
+export const MenuIconButton = <T extends ElementType = "button">({
+  children,
+  icon,
+  className,
+  isDisabled,
+  isSelected,
+  as: Item = "div",
+  description,
+  // wrapping in forward ref with generic component causes the loss of ts definitions on props
+  inputRef,
+  ...props
+}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
+  const iconRef = useRef<DotLottie | null>(null);
+  return (
+    <Item
+      type="button"
+      role="menuitem"
+      className={twMerge(
+        "group relative flex w-full cursor-pointer flex-col items-center justify-center rounded p-2 font-inter text-sm text-bunker-100 transition-all duration-150 hover:bg-mineshaft-700",
+        isSelected && "bg-bunker-800 hover:bg-mineshaft-600",
+        isDisabled && "cursor-not-allowed hover:bg-transparent",
+        className
+      )}
+      onMouseEnter={() => iconRef.current?.play()}
+      onMouseLeave={() => iconRef.current?.stop()}
+      ref={inputRef}
+      {...props}
+    >
+      <div
+        className={`${
+          isSelected ? "opacity-100" : "opacity-0"
+        } absolute -left-[0.28rem] h-full w-1 rounded-md bg-primary transition-all duration-150`}
+      />
+      {icon && (
+        <div className="my-auto mb-2 h-6 w-6">
+          <DotLottieReact
+            dotLottieRefCallback={(el) => {
+              iconRef.current = el;
+            }}
+            src={`/lotties/${icon}.json`}
+            loop
+            className="h-full w-full"
+          />
+        </div>
+      )}
+      <div
+        className="flex-grow justify-center break-words text-center"
+        style={{ fontSize: "10px" }}
+      >
+        {children}
+      </div>
+    </Item>
+  );
+};