reza added Product suggestion

src/components/Comments/index.js

@@ -69,6 +69,14 @@ Comments.defaultProps = {
       userImage : userImage,
       rate : 4,
     },
-
+    {
+      id: 5,
+      pid: null,
+      username : 'رضا رحمانی',
+      date : new Date(),
+      text : 'به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد',
+      userImage : userImage,
+      rate : 4,
+    },
   ],
 }

src/components/ProductSuggestion/index.js

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+
+import productImg from "./product-chair.svg";
+import plus from "./plus.svg";
+
+const ProductSuggestion = ({ suggestions }) => {
+  const [selectedProduct, setSelectedProduct] = useState(null);
+
+  return (
+    <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
+      <h2 className="text-center text-lg font-bold text-productPrice">
+        این کالاها برای خرید به شما پیشنهام می دهیم
+      </h2>
+      {/* product design */}
+      <div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full">
+        {suggestions.map((suggestion, index) => (
+          <div className="flex flex-row mb-7 justify-center relative" style={{ width : 'calc(100% / 4.5)' }} key={index}>
+            <div
+              className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer
+               ${selectedProduct === suggestion ? "bg-white" : ""}`}
+              onClick={() => setSelectedProduct(suggestion)}
+            >
+              <img src={suggestion.productImage} alt="" className="w-full" />
+              <h2 className="my-3 text-sm text-productPrice">
+                {suggestion.productTitle}
+              </h2>
+              <p className="text-sm text-lightBlueTextColor">
+                {suggestion.productPrice}
+                <span className="mr-1 text-xs text-black">تومان</span>
+              </p>
+              <div className="flex flex-col items-center mt-3">
+                <span className="text-xs">انتخاب شما</span>
+                <input
+                  className="checkbox-input-checked mt-4 cursor-pointer w-4 h-4"
+                  type="checkbox"
+                />
+              </div>
+            </div>
+            {Number(index) !== suggestions.length - 1 && (
+              <img src={plus} alt="" className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2" />
+            )}
+          </div>
+        ))}
+      </div>
+      {/* bottom */}
+      <div className="flex flex-col justify-center items-center mt-4">
+        <div className="flex flex-row mb-5">
+          <p className="text-base text-productPrice font-bold">
+            جمع لوازم اختیاری خریداری شده
+            <span> 56/894/400 </span>
+            تومان
+          </p>
+          <span className="text-lightBlueTextColor text-base mr-1 font-bold">
+            1 کالا
+          </span>
+        </div>
+        <p className="text-sm font-light mb-2 text-gray-600">
+          در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
+        </p>
+        <button className="my-2 text-white rounded bg-blue-300 p-2 text-sm">
+          اضافه کردن 1 مورد به سبد خرید
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default ProductSuggestion;
+
+ProductSuggestion.defaultProps = {
+  suggestions: [
+    {
+      productImage: productImg,
+      productTitle: "لپ تاپ گیمینگ ایسوس",
+      productPrice: "750000",
+      plusIcon: null,
+    },
+    {
+      productImage: productImg,
+      productTitle: "مانیتور 40 اینچ",
+      productPrice: "3.000.000",
+      plusIcon: plus,
+    },
+    {
+      productImage: productImg,
+      productTitle: "ماوس گیمینگ",
+      productPrice: "650/000",
+      plusIcon: plus,
+    },
+    {
+      productImage: productImg,
+      productTitle: "لپ تاپ مک بوک پرو 2022",
+      productPrice: "2000",
+      plusIcon: plus,
+    },
+  ],
+};

src/components/ProductSuggestion/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="58" viewBox="0 0 29 58">
+  <text id="_" data-name="+" transform="translate(29 47)" fill="#132f52" font-size="44" font-family="SegoeUI-Light, Segoe UI" font-weight="300"><tspan x="-28.596" y="0">+</tspan></text>
+</svg>

src/redux/data.js

@@ -29,6 +29,7 @@ import Comments from "../components/Comments";
 import Feedback from "../components/Feedback";
 import Features from '../components/Features';
 import Blogs from "../components/Blogs";
+import ProductSuggestion from "../components/ProductSuggestion";
 
 const components = [
   {
@@ -543,6 +544,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Product Suggestion",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Product Suggestion",
+      component: <ProductSuggestion />,
+      code: null,
+    },
+  },
 ];
 
 export default components;

src/utils/comments.js

@@ -1,16 +1,22 @@
 export const connectToParent = (list) => {
-  let comments = []
+  let comments = [];
   for (let item of list) {
     comments.push({ ...item, child: [] });
   }
 
   for (let comment1 of comments) {
     if (comment1.pid !== null) {
-      const index = comments.indexOf(comments.filter((comment2) => comment2.id === comment1.pid)[0]);
-      comments[index] = {...comments[index], child : [comment1]};
+      const index = comments.indexOf(
+        comments.filter((comment2) => comment2.id === comment1.pid)[0]
+      );
+      comments[index] = {
+        ...comments[index],
+        child: [...comments[index].child, comment1],
+      };
     } else {
-      console.log('nist :(')
+      
     }
   }
+  // comments = comments.filter((comment) => comment.pid === null);
   console.log(comments);
-}
+};