feat: completed the product sidebar

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