115 lines
4.6 KiB
TypeScript
115 lines
4.6 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import type { Metadata } from 'next';
|
|
import { fetchBrandBySlug, fetchProducts, formatPrice } from '@/lib/api';
|
|
import { formatRichText } from '@/lib/format-rich-text';
|
|
|
|
// Brand data comes from the live backend; resolve it at request time.
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
interface Props {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { slug } = await params;
|
|
const brand = await fetchBrandBySlug(slug);
|
|
if (!brand) return { title: 'Marca no encontrada' };
|
|
return {
|
|
title: brand.seoTitle ?? brand.name,
|
|
description: brand.seoDescription ?? `Productos ${brand.name} en mercadodevida.`,
|
|
};
|
|
}
|
|
|
|
export default async function BrandPage({ params }: Props) {
|
|
const { slug } = await params;
|
|
const [brand, products] = await Promise.all([
|
|
fetchBrandBySlug(slug),
|
|
fetchProducts({ brandSlug: slug, limit: 24 }),
|
|
]);
|
|
|
|
if (!brand) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 py-16 text-center">
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-4">Marca no encontrada</h1>
|
|
<Link href="/brands" className="text-[#70ad47] font-medium hover:underline">
|
|
Ver todas las marcas →
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Breadcrumb */}
|
|
<nav className="mb-6" aria-label="Breadcrumb">
|
|
<ol className="flex items-center gap-2 text-sm text-gray-500">
|
|
<li><Link href="/" className="hover:text-[#70ad47]">Inicio</Link></li>
|
|
<li><span className="text-gray-300">/</span></li>
|
|
<li><Link href="/brands" className="hover:text-[#70ad47]">Marcas</Link></li>
|
|
<li><span className="text-gray-300">/</span></li>
|
|
<li className="text-gray-900 font-medium">{brand.name}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
{/* Header */}
|
|
<div className="mb-8 flex items-center gap-4">
|
|
<div className="w-16 h-16 bg-[#70ad47]/10 rounded-2xl flex items-center justify-center">
|
|
<span className="text-2xl font-bold text-[#70ad47]">
|
|
{brand.name.slice(0, 2).toUpperCase()}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900" style={{ fontFamily: 'var(--font-heading)' }}>
|
|
{brand.name}
|
|
</h1>
|
|
{brand.seoDescription && (
|
|
<p className="mt-1 text-gray-600">{brand.seoDescription}</p>
|
|
)}
|
|
<p className="mt-1 text-sm text-gray-500">{products.length} producto{products.length !== 1 ? 's' : ''}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Products */}
|
|
{products.length === 0 ? (
|
|
<div className="py-16 text-center">
|
|
<p className="text-gray-500">No hay productos de esta marca todavía.</p>
|
|
<Link href="/brands" className="text-[#70ad47] font-medium hover:underline mt-4 inline-block">
|
|
Ver otras marcas →
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 justify-items-center">
|
|
{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 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" />
|
|
) : (
|
|
<span className="text-5xl">🌿</span>
|
|
)}
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-[#70ad47] transition-colors line-clamp-2 text-sm">
|
|
{product.name}
|
|
</h3>
|
|
{product.description && (
|
|
<div
|
|
className="text-gray-500 text-xs mt-1 line-clamp-2 rich-text prose prose-xs max-w-none"
|
|
dangerouslySetInnerHTML={{ __html: formatRichText(product.description) }}
|
|
/>
|
|
)}
|
|
<div className="mt-3 pr-2">
|
|
<span className="text-lg font-bold text-[#70ad47]">{formatPrice(0)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|