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