parent
935ad3edd7
commit
342b702af2
8 changed files with 275 additions and 30 deletions
@ -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; |
||||||
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 39 KiB |
@ -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,
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// };
|
||||||
|
|||||||
Loading…
Reference in new issue