EOH Developer
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"use client";
|
||
|
||
interface Props {
|
||
quantity: number;
|
||
onChange: (q: number) => void;
|
||
unitPrice: number;
|
||
sizeLabel: string;
|
||
max?: number;
|
||
}
|
||
|
||
export default function QuantityCounter({ quantity, onChange, unitPrice, sizeLabel, max = 200 }: Props) {
|
||
const dec = () => onChange(Math.max(1, quantity - 1));
|
||
const inc = () => onChange(Math.min(max, quantity + 1));
|
||
|
||
return (
|
||
<div className="rounded-xl2 border border-depth-200/60 bg-white p-4 shadow-soft">
|
||
<div className="mb-3 flex items-center justify-between">
|
||
<span className="text-sm font-medium text-depth-600">{sizeLabel} jerrycans</span>
|
||
<span className="font-mono text-sm text-depth-600">KES {unitPrice.toLocaleString()} each</span>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-4">
|
||
<button
|
||
type="button"
|
||
onClick={dec}
|
||
aria-label="Decrease quantity"
|
||
className="tap-target flex w-16 items-center justify-center rounded-xl2 bg-sand-100 text-3xl font-bold text-depth-800 active:scale-95"
|
||
>
|
||
–
|
||
</button>
|
||
|
||
<div className="text-center">
|
||
<div className="font-display text-4xl font-extrabold text-depth-900">{quantity}</div>
|
||
<div className="font-mono text-sm text-depth-600">KES {(quantity * unitPrice).toLocaleString()}</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={inc}
|
||
aria-label="Increase quantity"
|
||
className="tap-target flex w-16 items-center justify-center rounded-xl2 bg-flow-500 text-3xl font-bold text-depth-950 active:scale-95"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|