در این قسمت : این کالاها برای خرید به شما پیشنهام می دهیم قابلیت انتخاب چند تا کتاب رو اضافه کردم و همچنین کلاس اکتیو | 30

src/components/ProductSuggestion/index.js

@@ -8,7 +8,9 @@ import productImg from "./product-chair.svg";
 import plus from "./plus.svg";
 
 const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
-  const [selectedProduct, setSelectedProduct] = useState(null);
+  // const [selectedProduct, setSelectedProduct] = useState(null);
+  const [selectedProduct, setSelectedProduct] = useState([]);
+
   const [price, setPrice] = useState(0);
 
   useEffect(() => {
@@ -16,6 +18,7 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
       getSimilar({ id: book?.id });
     }
   }, [book]);
+
   useEffect(() => {
     if (similarList.length > 0) {
       let allPrice = 0;
@@ -25,6 +28,7 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
       setPrice(() => allPrice);
     }
   }, [similarList]);
+
   return (
     <section className="mt-10 border-2  border-gray-300 py-10 rounded-lg bg-grayF9">
       <h2 className="text-center text-lg font-bold text-productPrice mb-10">
@@ -39,9 +43,16 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
             key={index}
           >
             <div
-              className={`flex flex-col items-center  rounded-md  p-5 cursor-pointer bg-white
-               ${selectedProduct === book ? "bg-white" : ""}`}
-              onClick={() => setSelectedProduct(book)}
+              className={`flex flex-col items-center  rounded-md  p-5 cursor-pointer 
+               ${selectedProduct.includes(book) ? "bg-white" : ""}
+               `}
+              onClick={() =>
+                setSelectedProduct(
+                  selectedProduct.includes(book)
+                    ? selectedProduct.filter((item) => item != book)
+                    : [...selectedProduct, book]
+                )
+              }
               style={{ border: "solid 1px #ddd" }}
             >
               <img

src/views/Product/Desktop/index.js

@@ -20,7 +20,7 @@ const DesktopProductLayout = () => {
       <div className="w-2/5 my-8">
         <Rate desktop />
       </div>
-      <div className="w-4/5">
+      <div className="w-4/5 ">
         <Comments indent={false} />
         {/* <QandA /> */}
       </div>