feat(stackedComponents): add ElementStack component to create a stacked effect for child components

fix(market-card): refactor tagsPopUp to use ElementStack component for a stacked effect

src/frontend/src/components/stackedComponents/index.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+
+interface ElementStackProps {
+  children: ReactNode[];
+}
+
+const ElementStack: React.FC<ElementStackProps> = ({ children }) => {
+  return (
+    <div className="relative flex">
+      {children.map((child, index) => (
+        <div
+          key={index}
+          className={` transform translate-x-${index * 4} -translate-y-${
+            index * 2
+          } scale-${100 - index * 3}`}
+          style={{ zIndex: children.length - index }}
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ElementStack;

src/frontend/src/pages/StorePage/components/market-card.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useContext, useEffect, useRef, useState } from "react";
 import ShadTooltip from "../../../components/ShadTooltipComponent";
 import IconComponent from "../../../components/genericIconComponent";
+import ElementStack from "../../../components/stackedComponents";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
 import {
@@ -26,19 +27,23 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const flowData = useRef<FlowType>();
   const tagsPopUp = useRef<HTMLDivElement & ReactNode>(null);
-
+  const testTags = ["teste", "teste2", "teste3"];
   useEffect(() => {
     //@ts-ignore
     tagsPopUp.current = (
-      <div className="flex flex-col gap-1">
+      <div className="flex flex-col flex-wrap gap-1">
-        <span className="text-sm font-bold">Tags</span>
+        {testTags.map((tag, index) => (
-        <div className="flex flex-wrap gap-1">
+          <div className="">
-          {["teste"].map((tag) => (
+            <Badge
-            <Badge size="sm" variant="outline">
+              key={index}
+              className="shadow-lg"
+              size="sm"
+              variant="outline"
+            >
               {tag}
             </Badge>
-          ))}
           </div>
+        ))}
       </div>
     );
   }, []);
@@ -141,10 +146,41 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
         <div className="flex w-full items-center justify-between gap-2">
           <div className="flex w-full flex-wrap items-end justify-between gap-2">
             <div className=" flex items-center gap-3">
-              <ShadTooltip side="top" content={tagsPopUp.current}>
+              <ShadTooltip
-                <Badge size="md" variant="outline">
+                styleClasses="bg-transparent border-none shadow-none"
-                  {data.tags.length > 0 ? "teste" : "-"}
+                side="top"
+                content={
+                  <div className="flex flex-wrap  gap-1">
+                    {testTags.map((tag, index) => (
+                      <div className="">
+                        <Badge
+                          key={index}
+                          className="bg-card shadow-md"
+                          size="sm"
+                          variant="outline"
+                        >
+                          {tag}
                         </Badge>
+                      </div>
+                    ))}
+                  </div>
+                }
+              >
+                <div>
+                  {data.tags.length > 0 ? (
+                    <ElementStack>
+                      {data.tags.map((tag, index) => (
+                        <Badge key={index} size="md" variant="outline">
+                          {"tag"}
+                        </Badge>
+                      ))}
+                    </ElementStack>
+                  ) : (
+                    <Badge size="md" variant="outline">
+                      -
+                    </Badge>
+                  )}
+                </div>
               </ShadTooltip>
               <ShadTooltip content="Components">
                 <span className="flex items-center gap-1.5 text-xs text-foreground">