reza added Product suggestion

master
Reza_ashrafi 3 years ago
parent cd00137ec3
commit 4aa0b60f93
  1. 10
      src/components/Comments/index.js
  2. 97
      src/components/ProductSuggestion/index.js
  3. 3
      src/components/ProductSuggestion/plus.svg
  4. 8
      src/components/ProductSuggestion/product-chair.svg
  5. 11
      src/redux/data.js
  6. 26
      src/utils/comments.js

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

@ -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,
},
],
};

@ -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>

After

Width:  |  Height:  |  Size: 277 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 39 KiB

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

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

Loading…
Cancel
Save