From 2911f8751a379d3f0006f35765d560c37f767a4d Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 27 Oct 2023 17:56:23 -0300
Subject: [PATCH] refactor(stackedComponents): update ElementStack component to
 use CSS grid for layout instead of flexbox fix(market-card.tsx): fix variable
 name in MarketCardComponent to correctly display tags in ElementStack
 component

---
 .../src/components/stackedComponents/index.tsx    | 15 ++++++++++-----
 .../pages/StorePage/components/market-card.tsx    | 11 ++++++++---
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/stackedComponents/index.tsx b/src/frontend/src/components/stackedComponents/index.tsx
index 000dba85d..ee91f561e 100644
--- a/src/frontend/src/components/stackedComponents/index.tsx
+++ b/src/frontend/src/components/stackedComponents/index.tsx
@@ -6,14 +6,19 @@ interface ElementStackProps {
 
 const ElementStack: React.FC<ElementStackProps> = ({ children }) => {
   return (
-    <div className="relative flex">
+    <div
+      className={`grid grid-cols-3`}
+      style={{ display: "grid", gridAutoFlow: "row" }}
+    >
       {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 }}
+          style={{
+            gridColumn: 1,
+            gridRow: 1,
+            transform: `translateX(${index * 0.3}rem)`,
+            zIndex: children.length - index,
+          }}
         >
           {child}
         </div>
diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx
index 335b92af1..7c4962bfa 100644
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/src/frontend/src/pages/StorePage/components/market-card.tsx
@@ -167,10 +167,15 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
                 }
               >
                 <div>
-                  {data.tags.length > 0 ? (
+                  {testTags.length > 0 ? (
                     <ElementStack>
-                      {data.tags.map((tag, index) => (
-                        <Badge key={index} size="md" variant="outline">
+                      {testTags.map((tag, index) => (
+                        <Badge
+                          key={index}
+                          size="md"
+                          className="bg-card"
+                          variant="outline"
+                        >
                           {"tag"}
                         </Badge>
                       ))}