master
mahdi 3 years ago
parent 2b5afc7979
commit cafbf0cdc3
  1. 93
      src/components/ProductSuggestion/index.js
  2. 3
      src/components/ProductSuggestion/plus.svg

@ -1,28 +1,99 @@
import React from "react"; import React, { useState } from "react";
import productImg from "./product-chair.svg"; import productImg from "./product-chair.svg";
import plus from "./plus.svg";
const ProductSuggestion = ({ suggestions }) => {
const [selectedProduct, setSelectedProduct] = useState(null);
const ProductSuggestion = () => {
return ( return (
<section className="m-10"> <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
<h2 className="text-center text-lg font-bold text-productPrice"> <h2 className="text-center text-lg font-bold text-productPrice">
این کالاها برای خرید به شما پیشنهام می دهیم این کالاها برای خرید به شما پیشنهام می دهیم
</h2> </h2>
<div className="flex justify-center mt-7"> {/* product design */}
{/* <div>+</div> */} <div className="flex flex-row flex-wrap justify-center items-center mt-20">
<div className="flex flex-col items-center border rounded border-gray-200 bg-white p-4"> {suggestions.map((suggestion, index) => (
<img src={productImg} alt="" className="w-full h-full" /> <div className="flex flex-row mb-7" key={index}>
<img src={suggestion.plusIcon} alt="" className="mx-4" />
<div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer
${selectedProduct === suggestion ? "bg-white" : ""}`}
onClick={() => setSelectedProduct(suggestion)}
>
<img
src={suggestion.productImage}
alt=""
className="w-full h-full"
/>
<h2 className="my-3 text-sm text-productPrice"> <h2 className="my-3 text-sm text-productPrice">
لپ تاپ گیمینگ ایسوس {suggestion.productTitle}
</h2> </h2>
<p className="text-xs"> <p className="text-sm text-lightBlueTextColor">
945/000 {suggestion.productPrice}
<span className="mr-2">تومان</span> <span className="mr-1 text-xs text-black">تومان</span>
</p> </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>
</div> </div>
))}
</div>
{/* bottom */}
<div className="flex flex-col justify-center items-center mt-10">
<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-blueBgColor p-2 text-sm">
اضافه کردن 1 مورد به سبد خرید
</button>
</div> </div>
</section> </section>
); );
}; };
export default ProductSuggestion; 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

Loading…
Cancel
Save