55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useCart } from './CartProvider';
|
|
|
|
export function AddToCartButton({
|
|
productId,
|
|
slug,
|
|
name,
|
|
price,
|
|
variants,
|
|
}: {
|
|
productId: string;
|
|
slug: string;
|
|
name: string;
|
|
price: number;
|
|
variants?: { name: string; priceDelta: number }[];
|
|
}) {
|
|
const { add } = useCart();
|
|
const [variant, setVariant] = useState(variants?.[0]?.name);
|
|
const [added, setAdded] = useState(false);
|
|
const delta = variants?.find((v) => v.name === variant)?.priceDelta ?? 0;
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{variants && variants.length > 0 && (
|
|
<div>
|
|
<label className="label" htmlFor="variant">
|
|
Option
|
|
</label>
|
|
<select id="variant" className="input" value={variant} onChange={(e) => setVariant(e.target.value)}>
|
|
{variants.map((v) => (
|
|
<option key={v.name} value={v.name}>
|
|
{v.name}
|
|
{v.priceDelta ? ` (+$${(v.priceDelta / 100).toFixed(2)})` : ''}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="btn-primary w-full"
|
|
onClick={() => {
|
|
add({ productId, slug, name, variant, price: price + delta });
|
|
setAdded(true);
|
|
setTimeout(() => setAdded(false), 1500);
|
|
}}
|
|
>
|
|
{added ? 'Added ✓' : 'Add to cart'}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|