35 lines
963 B
TypeScript
35 lines
963 B
TypeScript
import React from 'react';
|
|
import { Product } from '../types/types';
|
|
import { Link } from 'react-router-dom';
|
|
import './ProductList.css';
|
|
|
|
type ProductListProps = {
|
|
products: Product[];
|
|
category: 'food' | 'drinks';
|
|
};
|
|
|
|
const ProductList: React.FC<ProductListProps> = ({ products, category }) => {
|
|
// Sort products by name alphabetically
|
|
const sortedProducts = [...products].sort((a, b) =>
|
|
a.name.localeCompare(b.name)
|
|
);
|
|
|
|
return (
|
|
<div className="product-list">
|
|
{sortedProducts.map(product => (
|
|
<Link
|
|
to={`/product/${category}/${product.id}`}
|
|
key={product.id}
|
|
className="product-item"
|
|
style={product.color ? { backgroundColor: `${product.color}80` } : {}}
|
|
>
|
|
<div className="product-name">{product.name}</div>
|
|
<div className="product-price">{product.basePrice.toFixed(2)} €</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductList;
|