71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
interface ProductQuantityProps {
|
|
onChange: (quantity: number) => void;
|
|
initialQuantity?: number;
|
|
min?: number;
|
|
max?: number;
|
|
}
|
|
|
|
export function ProductQuantity({
|
|
onChange,
|
|
initialQuantity = 1,
|
|
min = 1,
|
|
max = 100
|
|
}: ProductQuantityProps) {
|
|
const [quantity, setQuantity] = useState(initialQuantity);
|
|
|
|
const handleIncrement = () => {
|
|
if (quantity < max) {
|
|
const newQuantity = quantity + 1;
|
|
setQuantity(newQuantity);
|
|
onChange(newQuantity);
|
|
}
|
|
};
|
|
|
|
const handleDecrement = () => {
|
|
if (quantity > min) {
|
|
const newQuantity = quantity - 1;
|
|
setQuantity(newQuantity);
|
|
onChange(newQuantity);
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = parseInt(e.target.value);
|
|
if (!isNaN(value) && value >= min && value <= max) {
|
|
setQuantity(value);
|
|
onChange(value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
<button
|
|
onClick={handleDecrement}
|
|
type="button"
|
|
className="w-10 h-10 border border-gray-300 flex items-center justify-center text-lg font-medium text-gray-600 hover:bg-gray-50"
|
|
disabled={quantity <= min}
|
|
>
|
|
-
|
|
</button>
|
|
<input
|
|
type="text"
|
|
value={quantity}
|
|
onChange={handleInputChange}
|
|
className="w-16 h-10 border-t border-b border-gray-300 text-center focus:outline-none"
|
|
aria-label="Količina"
|
|
/>
|
|
<button
|
|
onClick={handleIncrement}
|
|
type="button"
|
|
className="w-10 h-10 border border-gray-300 flex items-center justify-center text-lg font-medium text-gray-600 hover:bg-gray-50"
|
|
disabled={quantity >= max}
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|