Files
klz-cables.com/app/[locale]/products/page.tsx
2026-01-13 19:25:39 +01:00

58 lines
1.8 KiB
TypeScript

import { t } from '@/lib/i18n'
import { ProductList } from '@/components/ProductList'
import { getProductsForLocaleWithExcel } from '@/lib/data'
import { Locale } from '@/lib/i18n'
interface PageProps {
params: {
locale: Locale;
};
}
export function generateMetadata({ params }: PageProps) {
return {
title: t('products.title', params.locale),
description: t('products.description', params.locale),
}
}
export default async function ProductsPage({ params }: PageProps) {
const products = getProductsForLocaleWithExcel(params.locale)
// Get unique categories
const categories = Array.from(
new Set(products
.filter(p => p.locale === params.locale)
.flatMap(p => p.categories.map(c => c.slug))
)
)
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-4xl font-bold mb-8">{t('products.title', params.locale)}</h1>
{categories.length > 0 && (
<div className="mb-8">
<h2 className="text-xl font-semibold mb-4">{t('products.categories', params.locale)}</h2>
<div className="flex flex-wrap gap-2">
{categories.map((category) => (
<a
key={category}
href={`/${params.locale}/product-category/${category}`}
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
>
{category}
</a>
))}
</div>
</div>
)}
{products.filter(p => p.locale === params.locale).length > 0 ? (
<ProductList products={products.filter(p => p.locale === params.locale)} locale={params.locale} />
) : (
<p className="text-gray-600">{t('products.noProducts', params.locale)}</p>
)}
</div>
)
}