diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx index 4502b7a..beb28ab 100644 --- a/frontend/src/components/ProductCard.tsx +++ b/frontend/src/components/ProductCard.tsx @@ -125,6 +125,31 @@ export default function ProductCard({ product, onDelete, onRefresh }: ProductCar color: var(--text-muted); } + .product-notifications { + display: flex; + gap: 0.5rem; + margin-top: 0.375rem; + flex-wrap: wrap; + } + + .product-notification-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-size: 0.6875rem; + font-weight: 500; + background: var(--background); + color: var(--text-muted); + border: 1px solid var(--border); + } + + .product-notification-badge svg { + width: 12px; + height: 12px; + } + .product-price-section { display: flex; flex-direction: column; @@ -272,6 +297,28 @@ export default function ProductCard({ product, onDelete, onRefresh }: ProductCar

{product.name || 'Unknown Product'}

{truncateUrl(product.url)}

+ {(product.price_drop_threshold || product.notify_back_in_stock) && ( +
+ {product.price_drop_threshold && ( + + + + + + ${Number(product.price_drop_threshold).toFixed(2)} drop + + )} + {product.notify_back_in_stock && ( + + + + + + Stock alert + + )} +
+ )}