You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
// it has style inside index.scss ---> // Start ProductImage && end ProductImage
|
|
|
|
|
|
|
|
import React from "react";
|
|
|
|
|
|
|
|
import "./index.scss";
|
|
|
|
|
|
|
|
import productImg from "./productImg.svg";
|
|
|
|
|
|
|
|
const ProductImage = ({ images }) => {
|
|
|
|
console.log(images.length);
|
|
|
|
|
|
|
|
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 justify-between ml-4 w-16">
|
|
|
|
{images.slice(0, 4).map((image, index) => (
|
|
|
|
<div className="relative">
|
|
|
|
<img
|
|
|
|
key={index}
|
|
|
|
src={productImg}
|
|
|
|
alt=""
|
|
|
|
className={`rounded-sm h-full`}
|
|
|
|
// style={{ height: "calc(100% - 8px)" }}
|
|
|
|
// style={{ height: "calc(100% - 8px)" }}
|
|
|
|
/>
|
|
|
|
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
|
|
|
|
{Number(index) === 3 && (
|
|
|
|
<div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
|
|
|
|
<strong>+ {images.length - 3}</strong>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
<img src={productImg} alt="" className="h-full" />
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
// {[0, 1, 2, 3, 4].map((item, index) => (
|
|
|
|
|
|
|
|
// ))}
|
|
|
|
|
|
|
|
export default ProductImage;
|
|
|
|
|
|
|
|
ProductImage.defaultProps = {
|
|
|
|
images: [
|
|
|
|
{
|
|
|
|
image: productImg,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: productImg,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: productImg,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: productImg,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: productImg,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|