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

feat(F-059): completed feature

Browse Source
This commit is contained in:
chattie
2026-08-19 15:32:56 +02:00
parent 4cdb5fb487
commit 72ba84456c
32 changed files with 369 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
project/frontend/src/components/cart/CartPageContent.tsx
View File

@@ -12,10 +12,18 @@ function CartItemRow({ item }: { item: CartItem }) {
return (
<div className="flex gap-4 py-4 border-b border-gray-100 last:border-0">
{/* Image */}
<div className="w-20 h-20 bg-gray-50 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
{/* Image: bounded box (80x112 max, 5:7 ratio matching the backend
thumbnail). The image preserves its source aspect ratio via
`object-contain` so non-square images are not cropped. */}
<div className="w-20 max-h-28 bg-gray-50 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
{item.imageUrl ? (
<Image src={item.imageUrl} alt={item.productName} width={80} height={80} className="object-cover" />
<Image
src={item.imageUrl.replace('/uploads/', '/uploads/40/')}
alt={item.productName}
width={80}
height={112}
className="object-contain"
/>
) : (
<span className="text-3xl">🌿</span>
)}

2
project/frontend/src/components/checkout/CheckoutClient.tsx
View File

@@ -244,7 +244,7 @@ export default function CheckoutClient() {
<div key={item.variantId} className="flex gap-3">
<div className="w-12 h-12 bg-white rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
{item.imageUrl
? <Image src={item.imageUrl} alt={item.productName} width={48} height={48} className="object-cover" />
? <Image src={item.imageUrl.replace('/uploads/', '/uploads/40/')} alt={item.productName} width={40} height={56} className="object-contain" />
: <span className="text-2xl">🌿</span>
}
</div>

4
project/frontend/src/components/home/FeaturedProducts.tsx
View File

@@ -34,9 +34,9 @@ export default async function FeaturedProducts() {
{products.map((product) => (
<Link key={product.id} href={`/products/${product.slug}`} className="group block">
<div className="bg-gray-50 rounded-xl overflow-hidden border border-gray-100 hover:border-[#70ad47] transition-colors">
<div className="aspect-square relative bg-white flex items-center justify-center">
<div className="relative aspect-[5/7] max-h-72 bg-white flex items-center justify-center overflow-hidden">
{product.images?.[0] ? (
<Image src={product.images[0].url} alt={product.name} fill className="object-cover" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" />
<Image src={product.images[0].url} alt={product.name} fill className="object-contain" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" />
) : (
<span className="text-5xl">🌿</span>
)}

8
project/frontend/src/components/layout/Header.tsx
View File

@@ -40,14 +40,14 @@ function LiveSearchResults({
onClick={onClose}
className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors"
>
<div className="w-10 h-10 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
<div className="w-10 h-14 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
{product.images?.[0] ? (
<Image
src={product.images[0].url}
src={product.images[0].url.replace('/uploads/', '/uploads/40/')}
alt={product.name}
width={40}
height={40}
className="object-cover w-full h-full"
height={56}
className="object-contain"
/>
) : (
<span className="text-lg">🌿</span>