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

feat(F-061): completed feature

Browse Source
This commit is contained in:
chattie
2026-08-19 16:56:06 +02:00
parent 5e2e935f76
commit e0411bc5a4
8 changed files with 195 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,10 +100,12 @@ export default async function ProductPage({ params }: Props) {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Image */}
<div>
{/* Detail image: bound the box at max-h 500px and let the image keep
its natural aspect ratio with `object-contain`. Non-square photos
render fully inside the box, never cropped. */}
<div className="relative aspect-[5/7] max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 flex items-center justify-center overflow-hidden">
{/* 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}
@@ -114,7 +116,7 @@ export default async function ProductPage({ params }: Props) {
sizes="(max-width: 1024px) 100vw, 50vw"
/>
) : (
<span className="text-8xl">🌿</span>
<span className="absolute inset-0 flex items-center justify-center text-8xl">🌿</span>
)}
</div>
</div>