master
mahdi 3 years ago
parent cafbf0cdc3
commit 39ac035709
  1. 20
      src/components/ProductSuggestion/index.js

@ -3,7 +3,7 @@ import React, { useState } from "react";
import productImg from "./product-chair.svg"; import productImg from "./product-chair.svg";
import plus from "./plus.svg"; import plus from "./plus.svg";
const ProductSuggestion = ({ suggestions }) => { const ProductSuggestion = ({ suggestions, selected }) => {
const [selectedProduct, setSelectedProduct] = useState(null); const [selectedProduct, setSelectedProduct] = useState(null);
return ( return (
@ -14,7 +14,7 @@ const ProductSuggestion = ({ suggestions }) => {
{/* product design */} {/* product design */}
<div className="flex flex-row flex-wrap justify-center items-center mt-20"> <div className="flex flex-row flex-wrap justify-center items-center mt-20">
{suggestions.map((suggestion, index) => ( {suggestions.map((suggestion, index) => (
<div className="flex flex-row mb-7" key={index}> <div className="flex flex-col sm:flex-row mb-7" key={index}>
<img src={suggestion.plusIcon} alt="" className="mx-4" /> <img src={suggestion.plusIcon} alt="" className="mx-4" />
<div <div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer
@ -34,9 +34,11 @@ const ProductSuggestion = ({ suggestions }) => {
<span className="mr-1 text-xs text-black">تومان</span> <span className="mr-1 text-xs text-black">تومان</span>
</p> </p>
<div className="flex flex-col items-center mt-3"> <div className="flex flex-col items-center mt-3">
<span className="text-xs">انتخاب شما</span> {suggestion.selected && (
<span className="text-xs">انتخاب شما</span>
)}
<input <input
className="checkbox-input-checked mt-4 cursor-pointer w-4 h-4" className="checkbox-input mt-4 cursor-pointer w-4 h-4"
type="checkbox" type="checkbox"
/> />
</div> </div>
@ -47,16 +49,16 @@ const ProductSuggestion = ({ suggestions }) => {
{/* bottom */} {/* bottom */}
<div className="flex flex-col justify-center items-center mt-10"> <div className="flex flex-col justify-center items-center mt-10">
<div className="flex flex-row mb-5"> <div className="flex flex-row mb-5">
<p className="text-base text-productPrice font-bold"> <p className="text-sm sm:text-base text-productPrice font-bold">
جمع لوازم اختیاری خریداری شده جمع لوازم اختیاری خریداری شده
<span> 56/894/400 </span> <span> 56/894/400 </span>
تومان تومان
</p> </p>
<span className="text-lightBlueTextColor text-base mr-1 font-bold"> <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-bold">
1 کالا 1 کالا
</span> </span>
</div> </div>
<p className="text-sm font-light mb-2 text-gray-600"> <p className="text-xs sm:text-sm font-light mb-2 text-gray-600">
در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
</p> </p>
<button className="my-2 text-white rounded bg-blueBgColor p-2 text-sm"> <button className="my-2 text-white rounded bg-blueBgColor p-2 text-sm">
@ -76,24 +78,28 @@ ProductSuggestion.defaultProps = {
productTitle: "لپ تاپ گیمینگ ایسوس", productTitle: "لپ تاپ گیمینگ ایسوس",
productPrice: "750000", productPrice: "750000",
plusIcon: null, plusIcon: null,
selected: true,
}, },
{ {
productImage: productImg, productImage: productImg,
productTitle: "مانیتور 40 اینچ", productTitle: "مانیتور 40 اینچ",
productPrice: "3.000.000", productPrice: "3.000.000",
plusIcon: plus, plusIcon: plus,
selected: false,
}, },
{ {
productImage: productImg, productImage: productImg,
productTitle: "ماوس گیمینگ", productTitle: "ماوس گیمینگ",
productPrice: "650/000", productPrice: "650/000",
plusIcon: plus, plusIcon: plus,
selected: false,
}, },
{ {
productImage: productImg, productImage: productImg,
productTitle: "لپ تاپ مک بوک پرو 2022", productTitle: "لپ تاپ مک بوک پرو 2022",
productPrice: "2000", productPrice: "2000",
plusIcon: plus, plusIcon: plus,
selected: false,
}, },
], ],
}; };

Loading…
Cancel
Save