75 lines
2.3 KiB
JavaScript
75 lines
2.3 KiB
JavaScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
|
|
export default function ProductDetails({ productItem }) {
|
|
if (!productItem) {
|
|
return (
|
|
<section className="product-details-simple fix section-padding">
|
|
<div className="container">
|
|
<p className="text-center text-danger">Product not found.</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const groupedImages = [];
|
|
for (let i = 0; i < productItem.images.length; i += 2) {
|
|
groupedImages.push(productItem.images.slice(i, i + 2));
|
|
}
|
|
|
|
return (
|
|
<section className="product-details-simple fix section-padding">
|
|
<div className="container">
|
|
<div className="row g-4">
|
|
<div className="col-12">
|
|
<div className="single-product-post">
|
|
<div
|
|
className="post-featured-thumb bg-cover rounded"
|
|
style={{
|
|
backgroundImage: `url(${productItem.bigImage})`,
|
|
height: "400px",
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
borderRadius: "12px",
|
|
marginBottom: "30px",
|
|
}}
|
|
/>
|
|
|
|
<h2 className="product-title mb-3">{productItem.title}</h2>
|
|
|
|
<div
|
|
className="post-description product-description"
|
|
dangerouslySetInnerHTML={{ __html: productItem.description }}
|
|
/>
|
|
|
|
{groupedImages.map((imagePair, index) => (
|
|
<div className="row mt-5 mb-5" key={index}>
|
|
{imagePair.map((imgSrc, subIndex) => (
|
|
<div
|
|
className={`${
|
|
subIndex === 0 ? "col-md-6 col-12" : "col-md-6 col-12"
|
|
} mt-2`}
|
|
key={subIndex}
|
|
>
|
|
<div className="details-image">
|
|
<Image
|
|
src={imgSrc}
|
|
width={633}
|
|
height={460}
|
|
alt={`Product Image ${index * 2 + subIndex + 1}`}
|
|
className="img-fluid"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|