Files
klz-cables.com/app/[locale]/products/page.tsx
2025-12-28 23:28:31 +01:00

61 lines
1.8 KiB
TypeScript

import { Metadata } from 'next'
import { t } from '@/lib/i18n'
import { ProductList } from '@/components/ProductList'
import { getAllProducts } from '@/lib/data'
import { Locale } from '@/lib/i18n'
import Link from 'next/link'
interface PageProps {
params: {
locale: Locale
}
}
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
return {
title: t('products.title', params.locale),
description: t('products.description', params.locale),
}
}
export default async function ProductsPage({ params }: PageProps) {
const products = getAllProducts()
// Get unique categories for this locale
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) => (
<Link
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}
</Link>
))}
</div>
</div>
)}
{products.filter(p => p.locale === params.locale).length > 0 ? (
<ProductList products={products.filter(p => p.locale === params.locale)} />
) : (
<p className="text-gray-600">{t('products.noProducts', params.locale)}</p>
)}
</div>
)
}