rc 1.0

app/components/PastDrops.tsx

@@ -11,6 +11,7 @@ interface PastDrop {
   unit: string
   ppu: number
   image_url: string | null
+  images?: string[] // Array of image URLs (up to 4)
   created_at: string
   soldOutInHours: number
 }
@@ -26,11 +27,21 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
 
   useEffect(() => {
     fetchPastDrops()
+
+    // Poll past drops every 30 seconds
+    const interval = setInterval(() => {
+      fetchPastDrops()
+    }, 30000) // 30 seconds
+
+    return () => clearInterval(interval)
   }, [])
 
   const fetchPastDrops = async () => {
     try {
-      const response = await fetch('/api/drops/past')
+      const response = await fetch('/api/drops/past', {
+        // Add cache control to prevent stale data
+        cache: 'no-store',
+      })
       if (response.ok) {
         const data = await response.json()
         setDrops(data)
@@ -98,49 +109,59 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
   return (
     <>
       <div className="past">
-        {displayedDrops.map((drop) => (
-          <div key={drop.id} className="card">
-            {drop.image_url ? (
-              <div style={{ marginBottom: '12px' }}>
-                <Image
-                  src={drop.image_url}
-                  alt={drop.item}
-                  width={300}
-                  height={300}
+        {displayedDrops.map((drop) => {
+          // Get images array (prioritize new images array, fallback to legacy image_url)
+          const images = drop.images && drop.images.length > 0 
+            ? drop.images 
+            : (drop.image_url ? [drop.image_url] : [])
+          
+          return (
+            <div key={drop.id} className="card">
+              {images.length > 0 ? (
+                <div style={{ marginBottom: '12px', display: 'grid', gridTemplateColumns: images.length > 1 ? '1fr 1fr' : '1fr', gap: '4px' }}>
+                  {images.slice(0, 4).map((imgUrl, index) => (
+                    <Image
+                      key={index}
+                      src={imgUrl}
+                      alt={`${drop.item} - Image ${index + 1}`}
+                      width={300}
+                      height={300}
+                      style={{
+                        width: '100%',
+                        height: '200px',
+                        borderRadius: '12px',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div
                   style={{
                     width: '100%',
                     height: '200px',
+                    background: 'var(--bg-soft)',
                     borderRadius: '12px',
-                    objectFit: 'cover',
+                    marginBottom: '12px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: 'var(--muted)',
                   }}
-                />
-              </div>
-            ) : (
-              <div
-                style={{
-                  width: '100%',
-                  height: '200px',
-                  background: 'var(--bg-soft)',
-                  borderRadius: '12px',
-                  marginBottom: '12px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  color: 'var(--muted)',
-                }}
-              >
-                No Image
-              </div>
-            )}
-            <strong>{drop.item}</strong>
-            <br />
-            <span className="meta">{formatSoldOutTime(drop.soldOutInHours)}</span>
-            <br />
-            <span className="meta" style={{ fontSize: '13px', marginTop: '4px', display: 'block' }}>
-              {formatQuantity(drop.size, drop.unit)} · {formatDateAndTime(drop.created_at)}
-            </span>
-          </div>
-        ))}
+                >
+                  No Image
+                </div>
+              )}
+              <strong>{drop.item}</strong>
+              <br />
+              <span className="meta">{formatSoldOutTime(drop.soldOutInHours)}</span>
+              <br />
+              <span className="meta" style={{ fontSize: '13px', marginTop: '4px', display: 'block' }}>
+                {formatQuantity(drop.size, drop.unit)} · {formatDateAndTime(drop.created_at)}
+              </span>
+            </div>
+          )
+        })}
       </div>
       {showMoreLink && hasMore && (
         <div style={{ textAlign: 'center', marginTop: '30px' }}>