Quantity Button Component
This React component allows users to adjust product quantities and supports two configurable display variants. In the default variant, the quantity controls are always visible alongside an "Add to List" button, making it ideal for detailed product views or areas where persistent actions are required. In the hover variant, the quantity controls appear only when the user hovers over the component, offering a cleaner, space-saving interface suited for product listings or compact layouts.
Key Features
- ➕ Increment/Decrement Support: Users can increase or decrease the quantity, with logic to prevent going below 0 or above a defined maxQuantity.
- State-Driven Quantity: Manages quantity internally using useState for real-time updates.
- Conditional Rendering: Shows a full "Add To List" button when quantity is 0 and addListBtn is enabled.
- Transforms into a compact quantity editor when quantity is greater than 0.
- Styled with Tailwind CSS: Includes animations, transitions, responsive widths, and hover states for a polished UI.
- Reusable Design: Accepts multiple props (quantity, maxQuantity, addListBtn, disabled, className) for customization in different use cases.
- Accessible Structure: Uses proper ARIA labels and semantics to support keyboard and screen reader users.
- Animated Transitions: Uses dynamic width, transform, and opacity transitions for smooth visual feedback.
- Subtle hover animations make the component feel responsive and modern.