55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import Image from 'next/image'
|
||
|
||
export default function Drop() {
|
||
const [selectedSize, setSelectedSize] = useState('50g')
|
||
|
||
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' }}
|
||
/>
|
||
<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>
|
||
|
||
<div className="progress">
|
||
<span></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>
|
||
|
||
<button className="cta">Join Drop</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|