update 2 files and delete 3 files

master
mahdi 2 years ago
parent a3786df817
commit be165b26ae
  1. 0
      public/images/ProductSuggestion1plus.svg
  2. 0
      public/images/ProductSuggestion1product-chair.svg
  3. 244
      src/components/ProductSuggestion/index.js
  4. 156
      src/components/ProductSuggestionCard/ProductSuggestion1/index.js
  5. 25
      src/components/ProductSuggestionCard/index.js
  6. 11
      src/redux/data.js

Before

Width:  |  Height:  |  Size: 277 B

After

Width:  |  Height:  |  Size: 277 B

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

@ -1,244 +0,0 @@
import React, { useState } from "react";
import productImg from "./product-chair.svg";
import plus from "./plus.svg";
import Button from "../Button";
const ProductSuggestion = ({ suggestions, selected }) => {
const [selectedProduct, setSelectedProduct] = useState([]);
return (
<section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
<h2 className="text-center text-lg font-sansbold text-productPrice">
این کالاها برای خرید به شما پیشنهام می دهیم
</h2>
{/* product design */}
<div className="flex flex-row flex-wrap justify-center items-center mt-20">
{suggestions.map((suggestion, index) => (
<div className="flex flex-col sm: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 transition-all ease-in-out duration-500
${selectedProduct.includes(suggestion) ? "bg-white" : ""}`}
// onClick={() => setSelectedProduct(suggestion)}
onClick={() =>
setSelectedProduct(
selectedProduct.includes(suggestion)
? selectedProduct.filter((item) => item != suggestion)
: [...selectedProduct, suggestion]
)
}
>
<img
src={suggestion.productImage}
alt=""
className="w-full h-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">
{/* {suggestion.selected && (
<span className="text-xs">انتخاب شما</span>
)} */}
{selectedProduct.includes(suggestion) && (
<span className="text-xs mt-2">انتخاب شما</span>
)}
<input
// checked={suggestion.selected}
checked={selectedProduct.includes(suggestion)}
onClick={() =>
setSelectedProduct(
selectedProduct.includes(suggestion)
? selectedProduct.filter((item) => item != suggestion)
: [...selectedProduct, suggestion]
)
}
className="checkbox-input mt-4 cursor-pointer w-4 h-4"
type="checkbox"
/>
</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-sm sm:text-base text-productPrice font-sansbold">
جمع لوازم اختیاری خریداری شده
<span> 56/894/400 </span>
تومان
</p>
<span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-sansbold">
1 کالا
</span>
</div>
<p className="text-xs sm:text-sm font-light mb-2 text-gray-600">
در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
</p>
<Button
className={`my-2 text-white rounded bg-blueBgColor px-2 py-2 text-sm`}
text={"اضافه کردن 1 مورد به سبد خرید"}
/>
</div>
</section>
);
};
export default ProductSuggestion;
ProductSuggestion.defaultProps = {
suggestions: [
{
productImage: productImg,
productTitle: "لپ تاپ گیمینگ ایسوس",
productPrice: "750000",
plusIcon: null,
// selected: true,
},
{
productImage: productImg,
productTitle: "مانیتور 40 اینچ",
productPrice: "3.000.000",
plusIcon: plus,
// selected: true,
},
{
productImage: productImg,
productTitle: "ماوس گیمینگ",
productPrice: "650/000",
plusIcon: plus,
// selected: false,
},
{
productImage: productImg,
productTitle: "لپ تاپ مک بوک پرو 2022",
productPrice: "2000",
plusIcon: plus,
// selected: false,
},
],
};
//
//
// import React, { useState } from "react";
// import productImg from "./product-chair.svg";
// import plus from "./plus.svg";
// const ProductSuggestion = ({ suggestions, selected }) => {
// const [selectedProduct, setSelectedProduct] = useState([]);
// const addToSelected = (obj) => {
// if (selectedProduct.indexOf(obj) === -1) {
// setSelectedProduct(() => [...selectedProduct, obj]);
// } else {
// setSelectedProduct(() =>
// selectedProduct.splice(selectedProduct.indexOf(obj), 1)
// );
// }
// };
// return (
// <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
// <h2 className="text-center text-lg font-sansbold text-productPrice">
// این کالاها برای خرید به شما پیشنهام می دهیم
// </h2>
// {/* product design */}
// <div className="flex flex-row flex-wrap justify-center items-center mt-20">
// {suggestions.map((suggestion, index) => (
// <div
// className="flex flex-col sm:flex-row mb-7"
// key={index}
// onClick={() => setSelectedProduct(suggestion)}
// >
// <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 transition-all ease-in-out duration-500
// ${selectedProduct === suggestion ? "bg-white" : ""}`}
// >
// <img
// src={suggestion.productImage}
// alt=""
// className="w-full h-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">
// {suggestion.selected && (
// <span className="text-xs">انتخاب شما</span>
// )}
// <input
// checked={selectedProduct.indexOf(suggestion) > -1}
// onClick={() => setSelectedProduct(suggestion)}
// className="checkbox-input mt-4 cursor-pointer w-4 h-4"
// type="checkbox"
// />
// </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-sm sm:text-base text-productPrice font-sansbold">
// جمع لوازم اختیاری خریداری شده
// <span> 56/894/400 </span>
// تومان
// </p>
// <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-sansbold">
// 1 کالا
// </span>
// </div>
// <p className="text-xs sm: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>
// </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,156 @@
import React, { useState } from "react";
import Button from "../../ButtonDesign/Button";
const ProductSuggestion1 = ({
suggestions,
cardTitle,
totalAmountTitle,
totalAmount,
selectedItems,
}) => {
const [selectedProduct, setSelectedProduct] = useState([]);
return (
<section className="flex flex-col gap-y-5 p-4 border-2 border-gray-300 rounded-lg">
<h2 className="text-center text-lg font-sansbold text-[#132F52]">
{cardTitle}
</h2>
{/* product design */}
<div className="flex flex-wrap items-center justify-center gap-y-10">
{suggestions.map((suggestion, index) => (
<div
className="relative flex flex-row mb-7 justify-center"
style={{ width: "calc(100% / 4.5)" }}
key={index}
>
<div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 transition-all ease-in-out duration-500 cursor-pointer
${selectedProduct.includes(suggestion) ? "bg-white" : ""}`}
// onClick={() => setSelectedProduct(suggestion)}
onClick={() =>
setSelectedProduct(
selectedProduct.includes(suggestion)
? selectedProduct.filter((item) => item != suggestion)
: [...selectedProduct, suggestion]
)
}
>
<img
src={suggestion.productImage}
alt="productImage"
className="w-full"
/>
<h2 className="my-3 text-sm text-[#132F52]">
{suggestion.productTitle}
</h2>
<p className="text-sm text-[#06BACE]">
{suggestion.productPrice}
<span className="mr-1 text-xs">تومان</span>
</p>
<div className="flex flex-col items-center">
{/* {suggestion.selected && (
<span className="text-xs">انتخاب شما</span>
)} */}
{selectedProduct.includes(suggestion) && (
<span className="mt-2 text-xs">انتخاب شما</span>
)}
<input
// checked={suggestion.selected}
checked={selectedProduct.includes(suggestion)}
onClick={() =>
setSelectedProduct(
selectedProduct.includes(suggestion)
? selectedProduct.filter((item) => item != suggestion)
: [...selectedProduct, suggestion]
)
}
className="w-4 mt-4 cursor-pointer "
type="checkbox"
/>
</div>
</div>
{Number(index) !== suggestions.length - 1 && (
<img
src="images/ProductSuggestion1plus.svg"
alt="plus"
className="w-4 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">
<div className="flex flex-row mb-5">
<p className="text-base text-[#132F52] font-sansbold">
{totalAmountTitle}
<span> {totalAmount} </span>
تومان
</p>
<span className="mr-2 text-[#06BACE] text-base font-sansbold">
{selectedItems} کالا
</span>
</div>
<p className="mb-2 text-gray-600 text-sm ">
در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
</p>
<Button
className={`my-2 text-white rounded bg-blueBgColor px-2 py-2 text-sm`}
text={"اضافه کردن 1 مورد به سبد خرید"}
/>
</div>
</section>
);
};
export default ProductSuggestion1;
ProductSuggestion1.defaultProps = {
cardTitle: "این کالاها برای خرید به شما پیشنهام می دهیم",
totalAmountTitle: "جمع لوازم اختیاری خریداری شده",
totalAmount: "56/894/400",
selectedItems: 1,
suggestions: [
{
productImage: "images/ProductSuggestion1product-chair.svg",
productTitle: "لپ تاپ گیمینگ ایسوس",
productPrice: "750000",
},
{
productImage: "images/ProductSuggestion1product-chair.svg",
productTitle: "مانیتور 40 اینچ",
productPrice: "3.000.000",
},
{
productImage: "images/ProductSuggestion1product-chair.svg",
productTitle: "ماوس گیمینگ",
productPrice: "650/000",
},
{
productImage: "images/ProductSuggestion1product-chair.svg",
productTitle: "مانیتور 40 اینچ",
productPrice: "3.000.000",
},
{
productImage: "images/ProductSuggestion1product-chair.svg",
productTitle: "ماوس گیمینگ",
productPrice: "650/000",
},
{
productImage: "images/ProductSuggestion1product-chair.svg",
productTitle: "ماوس گیمینگ",
productPrice: "650/000",
},
{
productImage: "images/ProductSuggestion1product-chair.svg",
productTitle: "ماوس گیمینگ",
productPrice: "650/000",
},
{
productImage: "images/ProductSuggestion1product-chair.svg",
productTitle: "ماوس گیمینگ",
productPrice: "650/000",
},
],
};

@ -0,0 +1,25 @@
import React, { useState } from "react";
import ProductSuggestion1 from "./ProductSuggestion1";
function ProductSuggestionCard() {
const list = {
1: <ProductSuggestion1 />,
};
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col items-center">
<select
className="mb-10 w-20 bg-gray-200"
onChange={(e) => setType(e.target.value)}
>
{Object.keys(list).map((option, index) => (
<option key={index}>{option}</option>
))}
</select>
{list[type]}
</div>
);
}
export default ProductSuggestionCard;

@ -25,6 +25,7 @@ import Sidebar from "../components/Sidebar";
import SingleProduct from "../components/SingleProduct";
import Rating from "../components/Rating";
import Tooltip from "../components/Tooltip";
import ProductSuggestionCard from "../components/ProductSuggestionCard";
// mini components
import MiniComponents from "../components/MiniComponents";
@ -588,6 +589,16 @@ const components = [
code: null,
},
},
{
name: "Product Suggestion Card",
author: "Andalib",
props: [],
content: {
name: "Product Suggestion Card",
component: <ProductSuggestionCard />,
code: null,
},
},
// mini components
{
name: "Mini Components",

Loading…
Cancel
Save