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.
 
 
 

64 lines
1.7 KiB

// 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,
},
],
};