mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 2 files and delete 3 files

Browse Source
master
mahdi 3 years ago
parent a3786df817
commit be165b26ae
6 changed files with 192 additions and 244 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

0
src/components/ProductSuggestion/plus.svg → public/images/ProductSuggestion1plus.svg
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 277 B

After

Width:  |  Height:  |  Size: 277 B

0
src/components/ProductSuggestion/product-chair.svg → public/images/ProductSuggestion1product-chair.svg
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

244
src/components/ProductSuggestion/index.js
Unescape View File

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

156
src/components/ProductSuggestionCard/ProductSuggestion1/index.js
Unescape View File

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

25
src/components/ProductSuggestionCard/index.js
Unescape View File

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

11
src/redux/data.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save