master
mahdi 3 years ago
parent 935ad3edd7
commit 342b702af2
  1. 8
      src/App.js
  2. 20
      src/components/ProductImage/index.js
  3. 8
      src/components/ProductImage/product-chair.svg
  4. 8
      src/components/ProductImage/productImg.svg
  5. 119
      src/components/ProductSuggestion/index.js
  6. 2
      src/components/productDesign/ProductDesign.js
  7. 136
      src/components/testtttt/Testttt.js
  8. 4
      src/components/vodProductDesign/VodProductDesign.js

@ -25,13 +25,14 @@ import Feedback from "./components/Feedback/index";
import Alert from "./components/Alert"; import Alert from "./components/Alert";
import Toast from "./components/Toast"; import Toast from "./components/Toast";
import ProductSuggestion from "./components/ProductSuggestion"; import ProductSuggestion from "./components/ProductSuggestion";
import ProductImage from "./components/ProductImage";
function App() { function App() {
return ( return (
<Provider store={store}> <Provider store={store}>
<div className="App"> <div className="App">
{/* <ProductDesign /> */} <ProductDesign />
{/* <VodProductDesign /> */} <VodProductDesign />
{/* <BookDesign /> */} {/* <BookDesign /> */}
{/* <ButtonDesign /> */} {/* <ButtonDesign /> */}
{/* <ProductTags /> */} {/* <ProductTags /> */}
@ -51,7 +52,8 @@ function App() {
{/* <Feedback /> */} {/* <Feedback /> */}
{/* <Alert /> */} {/* <Alert /> */}
{/* <Toast /> */} {/* <Toast /> */}
<ProductSuggestion /> {/* <ProductSuggestion /> */}
{/* <ProductImage /> */}
</div> </div>
</Provider> </Provider>
); );

@ -0,0 +1,20 @@
import React from "react";
import productImg from "./productImg.svg";
const ProductImage = () => {
return (
<section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg">
<div className="w-4/12 flex flex-row h-72">
<div className="flex flex-col items-center ml-4 bg-red-600 overflow-y-scroll">
{[0, 1, 2, 3, 4].map((item, index) => (
<img src={productImg} alt="" className=" w-20 rounded-sm mb-2" />
))}
</div>
<img src={productImg} alt="" className="h-full" />
</div>
</section>
);
};
export default ProductImage;

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 39 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 39 KiB

@ -37,6 +37,7 @@ const ProductSuggestion = ({ suggestions, selected }) => {
<span className="text-xs">انتخاب شما</span> <span className="text-xs">انتخاب شما</span>
)} )}
<input <input
checked={suggestion.selected}
onClick={() => setSelectedProduct(suggestion)} onClick={() => setSelectedProduct(suggestion)}
className="checkbox-input mt-4 cursor-pointer w-4 h-4" className="checkbox-input mt-4 cursor-pointer w-4 h-4"
type="checkbox" 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 (
// <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
// <h2 className="text-center text-lg font-bold 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-bold">
// جمع لوازم اختیاری خریداری شده
// <span> 56/894/400 </span>
// تومان
// </p>
// <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-bold">
// 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,
// },
// ],
// };

@ -50,7 +50,7 @@ const ProductDesign = ({
}, []); }, []);
return ( return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-full sm:w-11/12 mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */} {/* title holder */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-lg text-$productTitle">آیتم محصولات</h2> <h2 className="text-lg text-$productTitle">آیتم محصولات</h2>

@ -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 = () => { // import productImg from "./product-chair.svg";
const [isHovering, setIsHovering] = useState(false); // import plus from "./plus.svg";
return ( // const ProductSuggestion = ({ suggestions, selected }) => {
<div className="p-20 relative"> // const [selectedProduct, setSelectedProduct] = useState([]);
<button // const addToSelected = (obj) => {
className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer transition delay-500 ${ // if (selectedProduct.indexOf(obj) === -1) {
isHovering ? "" : "hidden" // setSelectedProduct(() => [...selectedProduct, obj]);
}`} // } else {
> // setSelectedProduct(() =>
hover to see me // selectedProduct.splice(selectedProduct.indexOf(obj), 1)
</button> // );
<img // }
src={blogImage} // };
alt="" // return (
className="w-96" // <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
onMouseEnter={() => setIsHovering(true)} // <h2 className="text-center text-lg font-bold text-productPrice">
onMouseLeave={() => setIsHovering(false)} // این کالاها برای خرید به شما پیشنهام می دهیم
/> // </h2>
</div> // {/* 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-bold">
// جمع لوازم اختیاری خریداری شده
// <span> 56/894/400 </span>
// تومان
// </p>
// <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-bold">
// 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 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,
// },
// ],
// };

@ -55,7 +55,7 @@ const VodProductDesign = ({
}, 1000); }, 1000);
}); });
return ( return (
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-full sm:w-3/6 mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */} {/* title holder */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-lg text-productTitle">طراحی محصولات vod</h2> <h2 className="text-lg text-productTitle">طراحی محصولات vod</h2>
@ -70,7 +70,7 @@ const VodProductDesign = ({
</div> </div>
{/* product UI Design */} {/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around"> <div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4"> <div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4">
<div <div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
> >

Loading…
Cancel
Save