update src/components/BoxNextToEachOther/index.js, src/components/CardTrelloDesign/index.js and src/components/ProductSuggestion/index.js

src/components/BoxNextToEachOther/index.js

@@ -2,28 +2,43 @@ import React, { useState } from "react";
 
 import selected from "./selected.svg";
 
-const BoxNextToEachOther = ({ items }) => {
+const BoxNextToEachOther = ({ cards }) => {
-  const [active, setActive] = useState(null);
+  // const [active, setActive] = useState(null);
+  const [active, setActive] = useState([]);
 
   return (
     <div className="w-fit flex flex-row items-center gap-x-2">
-      {items.map((item, index) => (
+      {cards.map((card, index) => (
+        //  ${active === card ? "bg-[#245CE1]" : "bg-white"}
         <div
           key={index}
-          className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-[#EBF4FF] rounded-md cursor-pointer ${
+          className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-[#EBF4FF] rounded-md cursor-pointer
-            active === item ? "bg-[#245CE1]" : "bg-white"
+           ${active.includes(card) ? "bg-[#245CE1]" : "bg-white"}
-          }`}
+
-          onClick={() => setActive(active === item ? null : item)}
+          `}
+          // onClick={() => setActive(active === card ? null : card)}
+          onClick={() =>
+            setActive(
+              active.includes(card)
+                ? active.filter((item) => item != card)
+                : [...active, card]
+            )
+          }
         >
           {console.log(setActive)}
           <h2
-            className={`font-sansbold ${
+            className={`font-sansbold 
-              active === item ? "text-white" : "text-[#0F0543]"
+            ${active.includes(card) ? "text-white" : "text-[#0F0543]"}
-            }`}
+            `}
           >
-            {item.title}
+            {card.title}
           </h2>
-          {active === item && (
+          {/* {active === card && (
+            <div className="absolute left-3 top-3">
+              <img src={selected} alt="selected-icon" className="w-7" />
+            </div>
+          )} */}
+          {active.includes(card) && (
             <div className="absolute left-3 top-3">
               <img src={selected} alt="selected-icon" className="w-7" />
             </div>
@@ -37,7 +52,7 @@ const BoxNextToEachOther = ({ items }) => {
 export default BoxNextToEachOther;
 
 BoxNextToEachOther.defaultProps = {
-  items: [
+  cards: [
     {
       title: "زائر",
     },