map search

frontend/src/components/ItemMarkerInfo.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Item } from '../types';
+
+interface ItemMarkerInfoProps {
+  item: Item;
+  onViewDetails?: () => void;
+}
+
+const ItemMarkerInfo: React.FC<ItemMarkerInfoProps> = ({ item, onViewDetails }) => {
+  const getPriceDisplay = () => {
+    if (item.pricePerDay !== undefined) {
+      return Number(item.pricePerDay) === 0 
+        ? "Free to Borrow" 
+        : `$${Math.floor(Number(item.pricePerDay))}/Day`;
+    } else if (item.pricePerHour !== undefined) {
+      return Number(item.pricePerHour) === 0 
+        ? "Free to Borrow" 
+        : `$${Math.floor(Number(item.pricePerHour))}/Hour`;
+    }
+    return 'Contact for pricing';
+  };
+
+  const getLocationDisplay = () => {
+    return item.city && item.state 
+      ? `${item.city}, ${item.state}` 
+      : 'Location not specified';
+  };
+
+  return (
+    <div style={{ width: 'min(280px, 90vw)', maxWidth: '280px' }}>
+      <div className="card border-0">
+        {item.images && item.images[0] ? (
+          <img
+            src={item.images[0]}
+            className="card-img-top"
+            alt={item.name}
+            style={{ 
+              height: '120px', 
+              objectFit: 'cover',
+              borderRadius: '8px 8px 0 0'
+            }}
+          />
+        ) : (
+          <div
+            className="bg-light d-flex align-items-center justify-content-center"
+            style={{ 
+              height: '120px',
+              borderRadius: '8px 8px 0 0'
+            }}
+          >
+            <i className="bi bi-image text-muted" style={{ fontSize: '1.5rem' }}></i>
+          </div>
+        )}
+        
+        <div className="card-body p-3">
+          <h6 className="card-title mb-2 text-dark fw-bold text-truncate">
+            {item.name}
+          </h6>
+
+          <div className="mb-2">
+            <span className="text-primary fw-bold">
+              {getPriceDisplay()}
+            </span>
+          </div>
+
+          <div className="text-muted small mb-2">
+            <i className="bi bi-geo-alt"></i> {getLocationDisplay()}
+          </div>
+
+          {item.description && (
+            <p className="card-text text-muted small mb-3" 
+               style={{ 
+                 display: '-webkit-box',
+                 WebkitLineClamp: 2,
+                 WebkitBoxOrient: 'vertical',
+                 overflow: 'hidden',
+                 lineHeight: '1.2em',
+                 maxHeight: '2.4em'
+               }}>
+              {item.description}
+            </p>
+          )}
+
+          <div className="d-grid">
+            <button 
+              className="btn btn-primary btn-sm"
+              onClick={onViewDetails}
+            >
+              View Details
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ItemMarkerInfo;