before race

app/components/PastDrops.tsx

@@ -15,7 +15,12 @@ interface PastDrop {
   soldOutInHours: number
 }
 
-export default function PastDrops() {
+interface PastDropsProps {
+  limit?: number
+  showMoreLink?: boolean
+}
+
+export default function PastDrops({ limit, showMoreLink = false }: PastDropsProps = {}) {
   const [drops, setDrops] = useState<PastDrop[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -55,6 +60,20 @@ export default function PastDrops() {
     }
   }
 
+  const formatDateAndTime = (dateString: string) => {
+    const date = new Date(dateString)
+    const day = date.getDate()
+    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    const month = monthNames[date.getMonth()]
+    const hours = date.getHours().toString().padStart(2, '0')
+    const minutes = date.getMinutes().toString().padStart(2, '0')
+    return `${day} ${month} · ${hours}:${minutes}`
+  }
+
+  const formatQuantity = (size: number, unit: string) => {
+    return `${size}${unit}`
+  }
+
   if (loading) {
     return (
       <div className="past">
@@ -73,50 +92,72 @@ export default function PastDrops() {
     )
   }
 
+  const displayedDrops = limit ? drops.slice(0, limit) : drops
+  const hasMore = limit && drops.length > limit
+
   return (
-    <div className="past">
-      {drops.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}
+    <>
+      <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}
+                  style={{
+                    width: '100%',
+                    height: '200px',
+                    borderRadius: '12px',
+                    objectFit: 'cover',
+                  }}
+                />
+              </div>
+            ) : (
+              <div
                 style={{
                   width: '100%',
-                  maxWidth: '300px',
-                  height: '300px',
+                  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%',
-                maxWidth: '300px',
-                height: '300px',
-                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>
+              >
+                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' }}>
+          <a
+            href="/past-drops"
+            style={{
+              color: 'var(--accent)',
+              textDecoration: 'none',
+              fontSize: '14px',
+              fontWeight: 500,
+            }}
+          >
+            More →
+          </a>
         </div>
-      ))}
-    </div>
+      )}
+    </>
   )
 }