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

feat(F-071): completed feature

Browse Source
This commit is contained in:
chattie
2026-08-19 19:04:41 +02:00
parent 16e4e86fbe
commit cf67f51d07
22 changed files with 495 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
project/frontend/src/app/categories/page.tsx
View File

@@ -36,10 +36,13 @@ export default async function CategoriesPage() {
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 justify-center">
{tree.map((cat, i) => (
<Link key={cat.id} href={`/categories/${cat.slug}`} className="group block">
<div className={`relative overflow-hidden rounded-2xl bg-gradient-to-br ${colors[i % colors.length]} p-6 text-white min-h-[140px] flex flex-col justify-between`}>
<div className="absolute top-4 right-4 text-5xl opacity-20">{icons[cat.slug] ?? '📦'}</div>
{tree.map((cat, i) => {
const emoji = cat.emoji ?? icons[cat.slug] ?? '📦';
const colorClass = cat.color ?? colors[i % colors.length];
return (
<Link key={cat.id} href={`/categories/${cat.slug}`} className="group block">
<div className={`relative overflow-hidden rounded-2xl bg-gradient-to-br ${colorClass} p-6 text-white min-h-[140px] flex flex-col justify-between`}>
<div className="absolute top-4 right-4 text-5xl opacity-20">{emoji}</div>
<div>
<h2 className="text-xl font-bold group-hover:underline">{cat.name}</h2>
{cat.seoDescription && (
@@ -60,7 +63,8 @@ export default async function CategoriesPage() {
</div>
</div>
</Link>
))}
);
})}
</div>
</div>
);

6
project/frontend/src/components/home/CategoriesGrid.tsx
View File

@@ -41,10 +41,12 @@ export default async function CategoriesGrid() {
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
{categories.map((cat, i) => {
const totalProducts = cat.children ? cat.children.length * 5 : 5;
const emoji = cat.emoji ?? icons[cat.slug] ?? '📦';
const colorClass = cat.color ?? colors[i % colors.length];
return (
<Link key={cat.id} href={`/categories/${cat.slug}`}>
<div className={`p-5 rounded-xl border border-gray-200 hover:border-[#70ad47] transition-all hover:shadow-md bg-white text-center ${colors[i % colors.length]}`}>
<div className="text-4xl mb-2">{icons[cat.slug] ?? '📦'}</div>
<div className={`p-5 rounded-xl border border-gray-200 hover:border-[#70ad47] transition-all hover:shadow-md bg-white text-center ${colorClass}`}>
<div className="text-4xl mb-2">{emoji}</div>
<h3 className="font-semibold text-gray-900 text-sm">{cat.name}</h3>
<p className="text-xs text-gray-500 mt-1">{totalProducts} productos</p>
{cat.children && cat.children.length > 0 && (

3
project/frontend/src/types/api.ts
View File

@@ -48,6 +48,9 @@ export interface Category {
seoDescription?: string;
imageUrl?: string;
description?: string;
isParent?: boolean;
emoji?: string;
color?: string;
children?: Category[];
}