unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix product images and add carousel; add transformation carousel on mobile
Some checks failed
Build and Deploy / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Unchained
2026-03-23 11:14:15 +02:00
parent f3d60d3c5b
commit 70d6cfc9a7
3 changed files with 115 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/product/ProductDetail.tsx
View File

@@ -152,7 +152,7 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6 }}
className="flex gap-4"
className="flex flex-col md:flex-row gap-4"
>
{/* Thumbnails - Vertical on Desktop, Hidden on Mobile */}
{images.length > 1 && (
@@ -167,29 +167,64 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
: "border-transparent hover:border-[#999999]"
}`}
>
<Image
<img
src={image.url}
alt={image.alt || localized.name}
fill
className="object-cover"
sizes="80px"
className="w-full h-full object-cover"
/>
</button>
))}
</div>
)}
{/* Main Image */}
<div className="relative aspect-square bg-[#f8f9fa] overflow-hidden">
{images[selectedImage] && (
<Image
src={images[selectedImage].url}
alt={images[selectedImage].alt || localized.name}
fill
className="object-cover"
priority
sizes="(max-width: 1024px) 100vw, 50vw"
/>
{/* Main Image */}
<div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden flex-1">
<img
src={images[selectedImage].url}
alt={images[selectedImage].alt || localized.name}
className="w-full h-full object-cover"
priority="true"
/>
{/* Carousel Navigation - Mobile Only */}
{images.length > 1 && (
<>
{/* Left Arrow */}
<button
onClick={() => setSelectedImage(prev => prev === 0 ? images.length - 1 : prev - 1)}
className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 hover:bg-white rounded-full flex items-center justify-center shadow-md transition-all hover:scale-110 md:hidden"
aria-label="Previous image"
>
<svg className="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
{/* Right Arrow */}
<button
onClick={() => setSelectedImage(prev => prev === images.length - 1 ? 0 : prev + 1)}
className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 hover:bg-white rounded-full flex items-center justify-center shadow-md transition-all hover:scale-110 md:hidden"
aria-label="Next image"
>
<svg className="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
{/* Dot Indicators - Mobile Only */}
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 md:hidden">
{images.map((_, index) => (
<button
key={index}
onClick={() => setSelectedImage(index)}
className={`w-2 h-2 rounded-full transition-all ${
selectedImage === index ? "bg-white w-4" : "bg-white/50"
}`}
aria-label={`Go to image ${index + 1}`}
/>
))}
</div>
</>
)}
</div>
</motion.div>