feat: completed the product sidebar

frontend/src/components/v2/Divider/Divider.tsx

@@ -7,7 +7,7 @@ interface IProps {
 export const Divider = ({ className }: IProps): JSX.Element => {
   return (
     <div className={twMerge("flex items-center px-2 opacity-50", className)}>
-      <div aria-hidden="true" className="h-5 w-full grow border border-t border-mineshaft-200" />
+      <div aria-hidden="true" className="h-1 w-full grow border-t border-mineshaft-300" />
     </div>
   );
 };

frontend/src/components/v2/Lottie/Lottie.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useRef } from "react";
+import { forwardRef, ReactNode, useRef } from "react";
 import { DotLottie, DotLottieReact, Mode } from "@lottiefiles/dotlottie-react";
 
 export type LottieProps = {
@@ -9,24 +9,27 @@ export type LottieProps = {
   className?: string;
 };
 
-export const Lottie = ({ children, icon, iconMode, ...props }: LottieProps): JSX.Element => {
-  const iconRef = useRef<DotLottie | null>(null);
-  return (
-    <div
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()}
-      {...props}
-    >
-      <DotLottieReact
-        dotLottieRefCallback={(el) => {
-          iconRef.current = el;
-        }}
-        mode={iconMode}
-        src={`/lotties/${icon}.json`}
-        loop
-        className="h-full w-full"
-      />
-      {children}
-    </div>
-  );
-};
+export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
+  ({ children, icon, iconMode, ...props }, ref): JSX.Element => {
+    const iconRef = useRef<DotLottie | null>(null);
+    return (
+      <div
+        onMouseEnter={() => iconRef.current?.play()}
+        onMouseLeave={() => iconRef.current?.stop()}
+        {...props}
+        ref={ref}
+      >
+        <DotLottieReact
+          dotLottieRefCallback={(el) => {
+            iconRef.current = el;
+          }}
+          mode={iconMode}
+          src={`/lotties/${icon}.json`}
+          loop
+          className="h-full w-full"
+        />
+        {children}
+      </div>
+    );
+  }
+);

frontend/src/components/v2/Menu/Menu.tsx

@@ -1,5 +1,4 @@
-import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from "react";
-import { DotLottie, DotLottieReact, Mode } from "@lottiefiles/dotlottie-react";
+import { ComponentPropsWithRef, ElementType, ReactNode, Ref } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type MenuProps = {
@@ -14,9 +13,8 @@ export const Menu = ({ children, className }: MenuProps): JSX.Element => {
 export type MenuItemProps<T extends ElementType> = {
   // Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
   as?: T;
-  children: ReactNode;
-  icon?: string;
-  iconMode?: Mode;
+  children?: ReactNode;
+  leftIcon?: ReactNode;
   description?: ReactNode;
   isDisabled?: boolean;
   isSelected?: boolean;
@@ -26,7 +24,7 @@ export type MenuItemProps<T extends ElementType> = {
 
 export const MenuItem = <T extends ElementType = "button">({
   children,
-  icon,
+  leftIcon,
   iconMode,
   className,
   isDisabled,
@@ -37,41 +35,21 @@ export const MenuItem = <T extends ElementType = "button">({
   inputRef,
   ...props
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
-  const iconRef = useRef<DotLottie | null>(null);
   return (
     <Item
       type="button"
       role="menuitem"
       className={twMerge(
-        "duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
+        "duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-2 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
         isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
         isDisabled && "cursor-not-allowed hover:bg-transparent",
         className
       )}
       ref={inputRef}
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()}
       {...props}
     >
-      <div
-        className={`${
-          isSelected ? "visisble" : "invisible"
-        } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
-      />
-      {icon && (
-        <div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3">
-          <DotLottieReact
-            dotLottieRefCallback={(el) => {
-              iconRef.current = el;
-            }}
-            mode={iconMode}
-            src={`/lotties/${icon}.json`}
-            loop
-            className="h-full w-full"
-          />
-        </div>
-      )}
-      <span className="flex-grow text-left">{children}</span>
+      {leftIcon}
+      {children && <span className="flex-grow whitespace-nowrap text-left">{children}</span>}
       {description && <span className="mt-2 text-xs">{description}</span>}
     </Item>
   );

frontend/src/components/v2/index.tsx

@@ -8,6 +8,7 @@ export * from "./Card";
 export * from "./Checkbox";
 export * from "./ConfirmActionModal";
 export * from "./ContentLoader";
+export * from "./Divider";
 export * from "./DatePicker";
 export * from "./DeleteActionModal";
 export * from "./Drawer";