rikrdo/mercadodevida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(F-066): completed feature

Browse Source
This commit is contained in:
chattie
2026-08-19 17:22:39 +02:00
parent e60e22ca30
commit 9f1858f6d7
10 changed files with 256 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
project/frontend/src/app/products/[slug]/page.tsx
View File

@@ -100,24 +100,26 @@ export default async function ProductPage({ params }: Props) {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Image */}
<div>
{/* Detail image: the container fills its column so the image is
always horizontally centered within the column (matches the
behaviour of the checkout layout). `max-h` bounds the height
and `object-contain` on the inner image preserves the source
aspect ratio without cropping. */}
<div className="relative w-full max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
{product.images?.[0] ? (
<Image
src={product.images[0].url}
alt={product.name}
fill
className="object-contain"
priority
sizes="(max-width: 1024px) 100vw, 50vw"
/>
) : (
<span className="absolute inset-0 flex items-center justify-center text-8xl">🌿</span>
)}
{/* Detail image: wrap in a flex container so the inner box is
horizontally centred inside the grid cell. The inner box has
`aspect-[5/7] max-h-[500px]` so it always has a real height
(next/image `fill` needs a non-zero parent) and the image is
letterboxed with `object-contain`. */}
<div className="flex justify-center">
<div className="relative w-full max-w-md aspect-[5/7] max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
{product.images?.[0] ? (
<Image
src={product.images[0].url}
alt={product.name}
fill
className="object-contain"
priority
sizes="(max-width: 1024px) 100vw, 50vw"
/>
) : (
<span className="absolute inset-0 flex items-center justify-center text-8xl">🌿</span>
)}
</div>
</div>
</div>