Antoni Nuñez Romeu
115 lines
3.1 KiB
React
115 lines
3.1 KiB
React
import React from 'react';
|
|
import './ProductResults.css';
|
|
|
|
const categoryLabels = {
|
|
otc: 'Sin Receta',
|
|
baby_food: 'Alimentación Infantil',
|
|
baby_milk: 'Leche de Fórmula',
|
|
baby_cereal: 'Cereales Bebé'
|
|
};
|
|
|
|
const sourceColors = {
|
|
cima: '#2563eb',
|
|
openfoodfacts: '#16a34a'
|
|
};
|
|
|
|
const sourceLabels = {
|
|
cima: 'CIMA',
|
|
openfoodfacts: 'Open Food Facts'
|
|
};
|
|
|
|
function ProductResults({ products, onSelect }) {
|
|
if (!products || products.length === 0) {
|
|
return (
|
|
<div className="no-results">
|
|
<p>No se encontraron productos</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="product-results">
|
|
{products.map((product) => (
|
|
<ProductCard
|
|
key={product.id}
|
|
product={product}
|
|
onSelect={onSelect}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ProductCard({ product, onSelect }) {
|
|
const nutriScore = product.nutriscore;
|
|
const nutriScoreColors = {
|
|
a: '#16a34a',
|
|
b: '#65a30d',
|
|
c: '#eab308',
|
|
d: '#f97316',
|
|
e: '#dc2626'
|
|
};
|
|
|
|
return (
|
|
<div className="product-card" onClick={() => onSelect(product)}>
|
|
<div className="product-card-image">
|
|
{product.image_url ? (
|
|
<img src={product.image_url} alt={product.name} loading="lazy" />
|
|
) : (
|
|
<div className="product-image-placeholder">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
|
<circle cx="8.5" cy="8.5" r="1.5" />
|
|
<polyline points="21 15 16 10 5 21" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="product-card-content">
|
|
<div className="product-card-badges">
|
|
<span
|
|
className="source-badge"
|
|
style={{ backgroundColor: sourceColors[product.source] }}
|
|
>
|
|
{sourceLabels[product.source]}
|
|
</span>
|
|
<span className="category-badge">
|
|
{categoryLabels[product.category] || product.category}
|
|
</span>
|
|
{product.source === 'openfoodfacts' && nutriScore && (
|
|
<span
|
|
className="nutri-score-badge"
|
|
style={{ backgroundColor: nutriScoreColors[nutriScore.toLowerCase()] || '#9ca3af' }}
|
|
>
|
|
Nutri-Score {nutriScore.toUpperCase()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="product-card-header">
|
|
<h3>{product.name}</h3>
|
|
</div>
|
|
|
|
<div className="product-card-body">
|
|
{product.brand && (
|
|
<p><strong>Marca:</strong> {product.brand}</p>
|
|
)}
|
|
{product.source === 'cima' && product.active_ingredient && (
|
|
<p><strong>Principio Activo:</strong> {product.active_ingredient}</p>
|
|
)}
|
|
{product.source === 'cima' && product.dosage && (
|
|
<p><strong>Dosis:</strong> {product.dosage}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="product-card-footer">
|
|
<span className="view-details">Ver detalles →</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProductResults;
|