57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
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;
|
|
|