sync

app/components/PastDrops.tsx

@@ -1,44 +1,119 @@
+'use client'
+
+import { useState, useEffect } from 'react'
 import Image from 'next/image'
 
 interface PastDrop {
-  name: string
-  image: string
-  soldIn: string
+  id: number
+  item: string
+  size: number
+  fill: number
+  unit: string
+  ppu: number
+  image_url: string | null
+  created_at: string
+  soldOutInHours: number
 }
 
-const pastDrops: PastDrop[] = [
-  {
-    name: 'Swiss Gold',
-    image: 'https://images.unsplash.com/photo-1581091012184-5c7b4c101899',
-    soldIn: 'Sold out in 42h',
-  },
-  {
-    name: 'Lemon T1',
-    image: 'https://images.unsplash.com/photo-1512436991641-6745cdb1723f',
-    soldIn: 'Sold out in 19h',
-  },
-  {
-    name: 'Alpine Frost',
-    image: 'https://images.unsplash.com/photo-1600431521340-491eca880813',
-    soldIn: 'Sold out in 31h',
-  },
-]
-
 export default function PastDrops() {
+  const [drops, setDrops] = useState<PastDrop[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetchPastDrops()
+  }, [])
+
+  const fetchPastDrops = async () => {
+    try {
+      const response = await fetch('/api/drops/past')
+      if (response.ok) {
+        const data = await response.json()
+        setDrops(data)
+      }
+    } catch (error) {
+      console.error('Error fetching past drops:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const formatSoldOutTime = (hours: number) => {
+    if (hours < 1) {
+      return 'Sold out in less than 1h'
+    } else if (hours === 1) {
+      return 'Sold out in 1h'
+    } else if (hours < 24) {
+      return `Sold out in ${hours}h`
+    } else {
+      const days = Math.floor(hours / 24)
+      const remainingHours = hours % 24
+      if (remainingHours === 0) {
+        return days === 1 ? 'Sold out in 1 day' : `Sold out in ${days} days`
+      } else {
+        return `Sold out in ${days}d ${remainingHours}h`
+      }
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="past">
+        <p style={{ color: 'var(--muted)', textAlign: 'center' }}>Loading past drops...</p>
+      </div>
+    )
+  }
+
+  if (drops.length === 0) {
+    return (
+      <div className="past">
+        <p style={{ color: 'var(--muted)', textAlign: 'center' }}>
+          No past drops yet. Check back soon!
+        </p>
+      </div>
+    )
+  }
+
   return (
     <div className="past">
-      {pastDrops.map((drop, index) => (
-        <div key={index} className="card">
-          <Image
-            src={drop.image}
-            alt={drop.name}
-            width={240}
-            height={240}
-            style={{ width: '100%', height: 'auto', borderRadius: '12px', marginBottom: '12px' }}
-          />
-          <strong>{drop.name}</strong>
+      {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}
+                style={{
+                  width: '100%',
+                  maxWidth: '300px',
+                  height: '300px',
+                  borderRadius: '12px',
+                  objectFit: 'cover',
+                }}
+              />
+            </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">{drop.soldIn}</span>
+          <span className="meta">{formatSoldOutTime(drop.soldOutInHours)}</span>
         </div>
       ))}
     </div>