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 = () => { |
||||
const [isHovering, setIsHovering] = useState(false); |
||||
// import productImg from "./product-chair.svg";
|
||||
// import plus from "./plus.svg";
|
||||
|
||||
return ( |
||||
<div className="p-20 relative"> |
||||
<button |
||||
className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer transition delay-500 ${ |
||||
isHovering ? "" : "hidden" |
||||
}`}
|
||||
> |
||||
hover to see me |
||||
</button> |
||||
<img |
||||
src={blogImage} |
||||
alt="" |
||||
className="w-96" |
||||
onMouseEnter={() => setIsHovering(true)} |
||||
onMouseLeave={() => setIsHovering(false)} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
// 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 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