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.

65 lines
1.7 KiB

3 years ago
// it has style inside index.scss ---> // Start ProductImage && end ProductImage
3 years ago
import React from "react";
3 years ago
import "./index.scss";
3 years ago
import productImg from "./productImg.svg";
3 years ago
const ProductImage = ({ images }) => {
console.log(images.length);
3 years ago
return (
<section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg">
3 years ago
<div className="w-4/12 flex flex-row h-72">
3 years ago
<div className="flex flex-col items-center justify-between ml-4 w-16">
3 years ago
{images.slice(0, 4).map((image, index) => (
<div className="relative">
<img
key={index}
src={productImg}
alt=""
3 years ago
className={`rounded-sm h-full`}
// style={{ height: "calc(100% - 8px)" }}
// style={{ height: "calc(100% - 8px)" }}
3 years ago
/>
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
{Number(index) === 3 && (
3 years ago
<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>
3 years ago
</div>
)}
</div>
3 years ago
))}
</div>
<img src={productImg} alt="" className="h-full" />
</div>
</section>
);
};
3 years ago
// {[0, 1, 2, 3, 4].map((item, index) => (
// ))}
3 years ago
export default ProductImage;
3 years ago
ProductImage.defaultProps = {
images: [
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
],
};