From cb0309586025e3ce70f3985d0ebb0c1318810181 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 27 Oct 2023 15:53:32 -0300
Subject: [PATCH] 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

---
 .../components/stackedComponents/index.tsx    | 25 ++++++++
 .../StorePage/components/market-card.tsx      | 60 +++++++++++++++----
 2 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 src/frontend/src/components/stackedComponents/index.tsx

diff --git a/src/frontend/src/components/stackedComponents/index.tsx b/src/frontend/src/components/stackedComponents/index.tsx
new file mode 100644
index 000000000..000dba85d
--- /dev/null
+++ b/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;
diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx
index 4deca30dd..335b92af1 100644
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/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">
-        <span className="text-sm font-bold">Tags</span>
-        <div className="flex flex-wrap gap-1">
-          {["teste"].map((tag) => (
-            <Badge size="sm" variant="outline">
+      <div className="flex flex-col flex-wrap gap-1">
+        {testTags.map((tag, index) => (
+          <div className="">
+            <Badge
+              key={index}
+              className="shadow-lg"
+              size="sm"
+              variant="outline"
+            >
               {tag}
             </Badge>
-          ))}
-        </div>
+          </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}>
-                <Badge size="md" variant="outline">
-                  {data.tags.length > 0 ? "teste" : "-"}
-                </Badge>
+              <ShadTooltip
+                styleClasses="bg-transparent border-none shadow-none"
+                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">