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

feat(F-068): completed feature

Browse Source
This commit is contained in:
chattie
2026-08-19 17:36:09 +02:00
parent f62bd6a578
commit ba2ac939c7
12 changed files with 235 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
project/frontend/src/app/brands/[slug]/page.tsx
View File

@@ -79,7 +79,7 @@ export default async function BrandPage({ params }: Props) {
{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-all hover:shadow-md">
<div className="relative w-full max-h-72 bg-white flex items-center justify-center overflow-hidden">
<div className="relative aspect-square w-full bg-white flex items-center justify-center overflow-hidden">
{product.images?.[0] ? (
<Image src={product.images[0].url} alt={product.name} fill className="object-contain" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" />
) : (
@@ -90,7 +90,12 @@ export default async function BrandPage({ params }: Props) {
<h3 className="font-semibold text-gray-900 group-hover:text-[#70ad47] transition-colors line-clamp-2 text-sm">
{product.name}
</h3>
<p className="text-gray-500 text-xs mt-1 line-clamp-2">{product.description}</p>
{product.description && (
<div
className="text-gray-500 text-xs mt-1 line-clamp-2 prose prose-xs max-w-none"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
)}
<div className="mt-3 pr-2">
<span className="text-lg font-bold text-[#70ad47]">{formatPrice(0)}</span>
</div>

9
project/frontend/src/app/categories/[slug]/page.tsx
View File

@@ -87,7 +87,7 @@ export default async function CategoryPage({ params }: Props) {
{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-all hover:shadow-md">
<div className="relative w-full max-h-72 bg-white flex items-center justify-center overflow-hidden">
<div className="relative aspect-square w-full bg-white flex items-center justify-center overflow-hidden">
{product.images?.[0] ? (
<Image src={product.images[0].url} alt={product.name} fill className="object-contain" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" />
) : (
@@ -103,7 +103,12 @@ export default async function CategoryPage({ params }: Props) {
<h3 className="font-semibold text-gray-900 group-hover:text-[#70ad47] transition-colors line-clamp-2 text-sm">
{product.name}
</h3>
<p className="text-gray-500 text-xs mt-1 line-clamp-2">{product.description}</p>
{product.description && (
<div
className="text-gray-500 text-xs mt-1 line-clamp-2 prose prose-xs max-w-none"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
)}
<div className="mt-3 pr-2">
<span className="text-lg font-bold text-[#70ad47]">{formatPrice(0)}</span>
</div>

15
project/frontend/src/app/products/page.tsx
View File

@@ -48,10 +48,10 @@ export default async function ProductsPage() {
return (
<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-all hover:shadow-md">
{/* Image container fills the card width; the image itself
is centred with `object-contain`. The bounding box is
capped at max-h-72 so very tall images don't dominate. */}
<div className="relative w-full max-h-72 bg-white flex items-center justify-center overflow-hidden">
{/* Square aspect ratio so cards line up in a 4-col grid; the
image is letterboxed with `object-contain` so non-square
sources still display without distortion. */}
<div className="relative aspect-square w-full bg-white flex items-center justify-center overflow-hidden">
{product.images?.[0] ? (
<Image
src={product.images[0].url}
@@ -71,7 +71,12 @@ export default async function ProductsPage() {
<h3 className="font-semibold text-gray-900 group-hover:text-[#70ad47] transition-colors line-clamp-2 text-sm">
{product.name}
</h3>
<p className="text-gray-500 text-xs mt-1 line-clamp-2">{product.description}</p>
{product.description && (
<div
className="text-gray-500 text-xs mt-1 line-clamp-2 prose prose-xs max-w-none"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
)}
<div className="mt-3 pr-2">
<span className="text-lg font-bold text-[#70ad47]">{formatPrice(0)}</span>
</div>

9
project/frontend/src/app/search/page.tsx
View File

@@ -92,7 +92,7 @@ export default async function SearchPage({ searchParams }: Props) {
return (
<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-all hover:shadow-md">
<div className="relative w-full max-h-72 bg-white flex items-center justify-center overflow-hidden">
<div className="relative aspect-square w-full bg-white flex items-center justify-center overflow-hidden">
{product.images?.[0] ? (
<Image src={product.images[0].url} alt={product.name} fill className="object-contain" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" />
) : (
@@ -106,7 +106,12 @@ export default async function SearchPage({ searchParams }: Props) {
<h3 className="font-semibold text-gray-900 group-hover:text-[#70ad47] transition-colors line-clamp-2 text-sm">
{product.name}
</h3>
<p className="text-gray-500 text-xs mt-1 line-clamp-2">{product.description}</p>
{product.description && (
<div
className="text-gray-500 text-xs mt-1 line-clamp-2 prose prose-xs max-w-none"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
)}
<div className="mt-3 pr-2">
<span className="text-lg font-bold text-[#70ad47]">{formatPrice(0)}</span>
</div>

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

@@ -34,7 +34,7 @@ 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="relative w-full max-h-72 bg-white flex items-center justify-center overflow-hidden">
<div className="relative aspect-square w-full bg-white flex items-center justify-center overflow-hidden">
{product.images?.[0] ? (
<Image src={product.images[0].url} alt={product.name} fill className="object-contain" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" />
) : (
@@ -44,7 +44,12 @@ export default async function FeaturedProducts() {
<div className="p-4">
{product.brandId && <p className="text-xs text-[#70ad47] font-medium uppercase tracking-wide mb-1">Marca</p>}
<h3 className="font-semibold text-gray-900 group-hover:text-[#70ad47] transition-colors line-clamp-2">{product.name}</h3>
<p className="text-gray-500 text-sm mt-1 line-clamp-2">{product.description}</p>
{product.description && (
<div
className="text-gray-500 text-sm mt-1 line-clamp-2 prose prose-xs max-w-none"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
)}
<div className="mt-3 pr-2">
<span className="text-lg font-bold text-[#70ad47]">{formatPrice(0)}</span>
</div>