78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { Product } from '@/lib/data';
|
|
|
|
interface ProductListProps {
|
|
products: Product[];
|
|
locale?: 'de' | 'en';
|
|
}
|
|
|
|
export function ProductList({ products, locale = 'de' }: ProductListProps) {
|
|
if (products.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-gray-500">
|
|
{locale === 'de' ? 'Keine Produkte gefunden' : 'No products found'}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{products.map((product) => (
|
|
<Link
|
|
key={product.id}
|
|
href={product.path}
|
|
className="group block bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow"
|
|
>
|
|
{product.featuredImage && (
|
|
<div className="aspect-video bg-gray-100 overflow-hidden">
|
|
<img
|
|
src={product.featuredImage}
|
|
alt={product.name}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="p-4">
|
|
<h3 className="font-semibold text-lg mb-2 text-gray-900 group-hover:text-blue-600 transition-colors">
|
|
{product.name}
|
|
</h3>
|
|
{product.shortDescriptionHtml && (
|
|
<div
|
|
className="text-sm text-gray-600 mb-3 line-clamp-2"
|
|
dangerouslySetInnerHTML={{ __html: product.shortDescriptionHtml }}
|
|
/>
|
|
)}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex gap-2">
|
|
{product.regularPrice && (
|
|
<span className={`font-bold ${product.salePrice ? 'text-gray-400 line-through text-sm' : 'text-blue-600'}`}>
|
|
{product.regularPrice}
|
|
</span>
|
|
)}
|
|
{product.salePrice && (
|
|
<span className="font-bold text-red-600">
|
|
{product.salePrice}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{product.stockStatus && (
|
|
<span className={`text-xs px-2 py-1 rounded ${
|
|
product.stockStatus === 'instock'
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-red-100 text-red-800'
|
|
}`}>
|
|
{product.stockStatus === 'instock'
|
|
? (locale === 'de' ? 'Auf Lager' : 'In Stock')
|
|
: (locale === 'de' ? 'Nicht auf Lager' : 'Out of Stock')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
} |