164 lines
4.4 KiB
TypeScript
164 lines
4.4 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
|
|
}
|
|
|
|
interface PastDropsProps {
|
|
limit?: number
|
|
showMoreLink?: boolean
|
|
}
|
|
|
|
export default function PastDrops({ limit, showMoreLink = false }: PastDropsProps = {}) {
|
|
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`
|
|
}
|
|
}
|
|
}
|
|
|
|
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">
|
|
<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>
|
|
)
|
|
}
|
|
|
|
const displayedDrops = limit ? drops.slice(0, limit) : drops
|
|
const hasMore = limit && drops.length > limit
|
|
|
|
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}
|
|
style={{
|
|
width: '100%',
|
|
height: '200px',
|
|
borderRadius: '12px',
|
|
objectFit: 'cover',
|
|
}}
|
|
/>
|
|
</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>
|
|
))}
|
|
</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>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|