123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Image from 'next/image'
|
|
|
|
interface PastDrop {
|
|
id: number
|
|
item: string
|
|
size: number
|
|
fill: number
|
|
unit: string
|
|
ppu: number
|
|
image_url: string | null
|
|
created_at: string
|
|
soldOutInHours: number
|
|
}
|
|
|
|
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">
|
|
{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">{formatSoldOutTime(drop.soldOutInHours)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|