feat(frontend): add ProductResults component for unified product search

Displays CIMA OTC and Open Food Facts baby products with source/category badges, product images, brand info, and Nutri-Score for OFF items.
2026-07-13 15:25:35 +02:00
parent 229e1d8106
commit a709deb893
2 changed files with 277 additions and 0 deletions
@@ -0,0 +1,114 @@
+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.nutri_score;
+  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;