|
|
|
@ -10,20 +10,21 @@ const ProductImage = ({ images }) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg"> |
|
|
|
<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="w-4/12 flex flex-row h-72"> |
|
|
|
<div className="flex flex-col items-center justify-between ml-4 w-20 h-full bg-red-500"> |
|
|
|
<div className="flex flex-col items-center justify-between ml-4 w-16 bg-red-500"> |
|
|
|
{images.slice(0, 4).map((image, index) => ( |
|
|
|
{images.slice(0, 4).map((image, index) => ( |
|
|
|
<div className="relative"> |
|
|
|
<div className="relative"> |
|
|
|
<img |
|
|
|
<img |
|
|
|
key={index} |
|
|
|
key={index} |
|
|
|
src={productImg} |
|
|
|
src={productImg} |
|
|
|
alt="" |
|
|
|
alt="" |
|
|
|
className={`rounded-sm`} |
|
|
|
className={`rounded-sm h-full`} |
|
|
|
style={{ height: "calc(100% - 8px)" }} |
|
|
|
// style={{ height: "calc(100% - 8px)" }}
|
|
|
|
|
|
|
|
// style={{ height: "calc(100% - 8px)" }}
|
|
|
|
/> |
|
|
|
/> |
|
|
|
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */} |
|
|
|
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */} |
|
|
|
{Number(index) === 3 && ( |
|
|
|
{Number(index) === 3 && ( |
|
|
|
<div className="absolute w-full h-full bg-black bg-opacity-40 left-0 top-0 flex justify-center items-center text-white"> |
|
|
|
<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> |
|
|
|
<strong>+ {images.length - 3}</strong> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
