API, Backend & Frontend

frontend/src/components/PharmacyList.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import './PharmacyList.css';
+
+function PharmacyList({ pharmacies, loading }) {
+  if (loading) {
+    return (
+      <div className="loading-pharmacies">
+        <p>Loading pharmacies...</p>
+      </div>
+    );
+  }
+
+  if (pharmacies.length === 0) {
+    return (
+      <div className="no-pharmacies">
+        <p>No pharmacies found selling this medicine</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pharmacy-list">
+      <h3 className="pharmacy-list-title">
+        Available at {pharmacies.length} {pharmacies.length === 1 ? 'pharmacy' : 'pharmacies'}
+      </h3>
+      <div className="pharmacy-grid">
+        {pharmacies.map((pharmacy) => (
+          <div key={pharmacy.id} className="pharmacy-card">
+            <div className="pharmacy-header">
+              <h4>🏥 {pharmacy.name}</h4>
+            </div>
+            <div className="pharmacy-details">
+              <p className="pharmacy-address">📍 {pharmacy.address}</p>
+              {pharmacy.phone && (
+                <p className="pharmacy-phone">📞 {pharmacy.phone}</p>
+              )}
+              <div className="pharmacy-pricing">
+                {pharmacy.price && (
+                  <span className="price">€{parseFloat(pharmacy.price).toFixed(2)}</span>
+                )}
+                {pharmacy.stock !== undefined && (
+                  <span className={`stock ${pharmacy.stock > 20 ? 'in-stock' : pharmacy.stock > 0 ? 'low-stock' : 'out-of-stock'}`}>
+                    {pharmacy.stock > 20 ? '✓ In Stock' : pharmacy.stock > 0 ? `⚠ Low Stock (${pharmacy.stock})` : '✗ Out of Stock'}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PharmacyList;
+