parent
cd00137ec3
commit
4aa0b60f93
6 changed files with 144 additions and 11 deletions
@ -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, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
After Width: | Height: | Size: 277 B |
After Width: | Height: | Size: 39 KiB |
@ -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] |
||||||
|
); |
||||||
|
comments[index] = { |
||||||
|
...comments[index], |
||||||
|
child: [...comments[index].child, comment1], |
||||||
|
}; |
||||||
} else { |
} else { |
||||||
console.log('nist :(') |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
// comments = comments.filter((comment) => comment.pid === null);
|
||||||
console.log(comments); |
console.log(comments); |
||||||
} |
}; |
||||||
|
Loading…
Reference in new issue