drop active
This commit is contained in:
@@ -1,52 +1,178 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface DropData {
|
||||
id: number
|
||||
item: string
|
||||
size: number
|
||||
fill: number
|
||||
unit: string
|
||||
ppu: number
|
||||
image_url: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export default function Drop() {
|
||||
const [selectedSize, setSelectedSize] = useState('50g')
|
||||
const [drop, setDrop] = useState<DropData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [selectedSize, setSelectedSize] = useState(50)
|
||||
|
||||
useEffect(() => {
|
||||
fetchActiveDrop()
|
||||
}, [])
|
||||
|
||||
const fetchActiveDrop = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/drops/active')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setDrop(data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching active drop:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getProgressPercentage = (fill: number, size: number) => {
|
||||
return Math.min((fill / size) * 100, 100)
|
||||
}
|
||||
|
||||
const formatSize = (size: number, unit: string) => {
|
||||
if (unit === 'g' && size >= 1000) {
|
||||
return `${(size / 1000).toFixed(1)}kg`
|
||||
}
|
||||
return `${size}${unit}`
|
||||
}
|
||||
|
||||
const getAvailableSizes = () => {
|
||||
if (!drop) return []
|
||||
const sizes = [50, 100, 250] // Always in grams
|
||||
|
||||
// Calculate remaining inventory in grams
|
||||
let remainingInGrams = 0
|
||||
if (drop.unit === 'kg') {
|
||||
remainingInGrams = (drop.size - drop.fill) * 1000
|
||||
} else {
|
||||
// For 'g' or any other unit, assume same unit
|
||||
remainingInGrams = drop.size - drop.fill
|
||||
}
|
||||
|
||||
// Only show sizes that don't exceed remaining inventory
|
||||
return sizes.filter((size) => size <= remainingInGrams)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="drop">
|
||||
<div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px' }}>
|
||||
<p style={{ color: 'var(--muted)' }}>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!drop) {
|
||||
return (
|
||||
<div className="drop">
|
||||
<div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '60px' }}>
|
||||
<h2 style={{ marginBottom: '16px' }}>Drop Sold Out</h2>
|
||||
<p style={{ color: 'var(--muted)', marginBottom: '20px' }}>
|
||||
The current collective drop has been fully reserved.
|
||||
</p>
|
||||
<p style={{ color: 'var(--muted)' }}>
|
||||
Next collective drop coming soon.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const progressPercentage = getProgressPercentage(drop.fill, drop.size)
|
||||
const availableSizes = getAvailableSizes()
|
||||
|
||||
// Calculate remaining in the drop's unit
|
||||
const remaining = drop.size - drop.fill
|
||||
const hasRemaining = remaining > 0
|
||||
|
||||
return (
|
||||
<div className="drop">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1604908554027-0b6c2c9c7e92"
|
||||
alt="Harlequin CBD"
|
||||
width={420}
|
||||
height={420}
|
||||
style={{ width: '100%', height: 'auto', borderRadius: '16px', objectFit: 'cover' }}
|
||||
/>
|
||||
{drop.image_url ? (
|
||||
<Image
|
||||
src={drop.image_url}
|
||||
alt={drop.item}
|
||||
width={420}
|
||||
height={420}
|
||||
style={{ width: '100%', height: 'auto', borderRadius: '16px', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1',
|
||||
background: 'var(--bg-soft)',
|
||||
borderRadius: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'var(--muted)',
|
||||
}}
|
||||
>
|
||||
No Image
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h2>Harlequin – Collective Drop</h2>
|
||||
<div className="meta">1kg Batch · Indoor · Switzerland</div>
|
||||
<div className="price">2.50 CHF / g · incl. 2.5% VAT</div>
|
||||
<h2>{drop.item}</h2>
|
||||
<div className="meta">
|
||||
{formatSize(drop.size, drop.unit)} Batch
|
||||
</div>
|
||||
<div className="price">
|
||||
{drop.ppu.toFixed(2)} CHF / {drop.unit} · incl. 2.5% VAT
|
||||
</div>
|
||||
|
||||
<div className="progress">
|
||||
<span></span>
|
||||
<span style={{ width: `${progressPercentage}%` }}></span>
|
||||
</div>
|
||||
<div className="meta">620g of 1,000g reserved</div>
|
||||
|
||||
<div className="options">
|
||||
<button
|
||||
className={selectedSize === '50g' ? 'active' : ''}
|
||||
onClick={() => setSelectedSize('50g')}
|
||||
>
|
||||
50g
|
||||
</button>
|
||||
<button
|
||||
className={selectedSize === '100g' ? 'active' : ''}
|
||||
onClick={() => setSelectedSize('100g')}
|
||||
>
|
||||
100g
|
||||
</button>
|
||||
<button
|
||||
className={selectedSize === '250g' ? 'active' : ''}
|
||||
onClick={() => setSelectedSize('250g')}
|
||||
>
|
||||
250g
|
||||
</button>
|
||||
<div className="meta">
|
||||
{drop.fill}
|
||||
{drop.unit} of {drop.size}
|
||||
{drop.unit} reserved
|
||||
</div>
|
||||
|
||||
<button className="cta">Join Drop</button>
|
||||
{hasRemaining && availableSizes.length > 0 && (
|
||||
<>
|
||||
<div className="options">
|
||||
{availableSizes.map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
className={selectedSize === size ? 'active' : ''}
|
||||
onClick={() => setSelectedSize(size)}
|
||||
>
|
||||
{size}g
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="cta">Join Drop</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{hasRemaining && availableSizes.length === 0 && (
|
||||
<div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
|
||||
<p style={{ margin: 0, color: 'var(--muted)' }}>
|
||||
Less than 50{drop.unit} remaining. This drop is almost fully reserved.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!hasRemaining && (
|
||||
<div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
|
||||
<p style={{ margin: 0, color: 'var(--muted)' }}>This drop is fully reserved</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user