diff --git a/src/App.js b/src/App.js index 0f32a40..cc422bf 100644 --- a/src/App.js +++ b/src/App.js @@ -25,13 +25,14 @@ import Feedback from "./components/Feedback/index"; import Alert from "./components/Alert"; import Toast from "./components/Toast"; import ProductSuggestion from "./components/ProductSuggestion"; +import ProductImage from "./components/ProductImage"; function App() { return (
- {/* */} - {/* */} + + {/* */} {/* */} {/* */} @@ -51,7 +52,8 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} + {/* */}
); diff --git a/src/components/ProductImage/index.js b/src/components/ProductImage/index.js new file mode 100644 index 0000000..e1eedaa --- /dev/null +++ b/src/components/ProductImage/index.js @@ -0,0 +1,20 @@ +import React from "react"; + +import productImg from "./productImg.svg"; + +const ProductImage = () => { + return ( +
+
+
+ {[0, 1, 2, 3, 4].map((item, index) => ( + + ))} +
+ +
+
+ ); +}; + +export default ProductImage; diff --git a/src/components/ProductImage/product-chair.svg b/src/components/ProductImage/product-chair.svg new file mode 100644 index 0000000..f5bb26c --- /dev/null +++ b/src/components/ProductImage/product-chair.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ProductImage/productImg.svg b/src/components/ProductImage/productImg.svg new file mode 100644 index 0000000..69a3c12 --- /dev/null +++ b/src/components/ProductImage/productImg.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ProductSuggestion/index.js b/src/components/ProductSuggestion/index.js index 06525cf..d30ac47 100644 --- a/src/components/ProductSuggestion/index.js +++ b/src/components/ProductSuggestion/index.js @@ -37,6 +37,7 @@ const ProductSuggestion = ({ suggestions, selected }) => { انتخاب شما )} setSelectedProduct(suggestion)} className="checkbox-input mt-4 cursor-pointer w-4 h-4" type="checkbox" @@ -103,3 +104,121 @@ ProductSuggestion.defaultProps = { }, ], }; + +// + +// +// 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 ( +//
+//

+// این کالاها برای خرید به شما پیشنهام می دهیم +//

+// {/* product design */} +//
+// {suggestions.map((suggestion, index) => ( +//
setSelectedProduct(suggestion)} +// > +// +//
+// +//

+// {suggestion.productTitle} +//

+//

+// {suggestion.productPrice} +// تومان +//

+//
+// {suggestion.selected && ( +// انتخاب شما +// )} +// -1} +// onClick={() => setSelectedProduct(suggestion)} +// className="checkbox-input mt-4 cursor-pointer w-4 h-4" +// type="checkbox" +// /> +//
+//
+//
+// ))} +//
+// {/* bottom */} +//
+//
+//

+// جمع لوازم اختیاری خریداری شده +// 56/894/400 +// تومان +//

+// +// 1 کالا +// +//
+//

+// در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید +//

+// +//
+//
+// ); +// }; + +// 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, +// }, +// ], +// }; diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js index cc86ee6..a26e785 100644 --- a/src/components/productDesign/ProductDesign.js +++ b/src/components/productDesign/ProductDesign.js @@ -50,7 +50,7 @@ const ProductDesign = ({ }, []); return ( -
+
{/* title holder */}

آیتم محصولات

diff --git a/src/components/testtttt/Testttt.js b/src/components/testtttt/Testttt.js index 946e521..274b6f5 100644 --- a/src/components/testtttt/Testttt.js +++ b/src/components/testtttt/Testttt.js @@ -1,27 +1,115 @@ -import React, { useState } from "react"; -import blogImage from "../../assets/images/blog-featured-image.jpg"; +// +// import React, { useState } from "react"; -const Testttt = () => { - const [isHovering, setIsHovering] = useState(false); +// import productImg from "./product-chair.svg"; +// import plus from "./plus.svg"; - return ( -
- - setIsHovering(true)} - onMouseLeave={() => setIsHovering(false)} - /> -
- ); -}; +// 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 ( +//
+//

+// این کالاها برای خرید به شما پیشنهام می دهیم +//

+// {/* product design */} +//
+// {suggestions.map((suggestion, index) => ( +//
setSelectedProduct(suggestion)} +// > +// +//
+// +//

+// {suggestion.productTitle} +//

+//

+// {suggestion.productPrice} +// تومان +//

+//
+// {suggestion.selected && ( +// انتخاب شما +// )} +// -1} +// onClick={() => setSelectedProduct(suggestion)} +// className="checkbox-input mt-4 cursor-pointer w-4 h-4" +// type="checkbox" +// /> +//
+//
+//
+// ))} +//
+// {/* bottom */} +//
+//
+//

+// جمع لوازم اختیاری خریداری شده +// 56/894/400 +// تومان +//

+// +// 1 کالا +// +//
+//

+// در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید +//

+// +//
+//
+// ); +// }; -export default Testttt; +// 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, +// }, +// ], +// }; diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js index 7b315e4..b675105 100644 --- a/src/components/vodProductDesign/VodProductDesign.js +++ b/src/components/vodProductDesign/VodProductDesign.js @@ -55,7 +55,7 @@ const VodProductDesign = ({ }, 1000); }); return ( -
+
{/* title holder */}

طراحی محصولات vod

@@ -70,7 +70,7 @@ const VodProductDesign = ({
{/* product UI Design */}
-
+