dertail product

1 files changed, 30 insertions, 18 deletions

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index a39877e9..3544fa26 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -1,13 +1,12 @@
 import style from '../styles/price-action.module.css';
 
-import React, { useEffect } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect } from 'react';
 import formatCurrency from '~/libs/formatCurrency';
 import { IProductDetail } from '~/types/product';
 import { useProductDetail } from '../stores/useProductDetail';
 import AddToCart from './AddToCart';
-import Link from 'next/link';
-import { getAuth } from '~/libs/auth';
-import Image from 'next/image';
 
 type Props = {
   product: IProductDetail;
@@ -54,7 +53,7 @@ const PriceAction = ({ product }: Props) => {
 
   return (
     <div
-      className='block md:sticky md:top-[150px] md:py-6 fixed bottom-0 left-0 right-0 bg-white p-4 z-10'
+      className='block md:sticky md:top-[150px] md:py-6 fixed bottom-0 left-0 right-0 bg-white p-2 z-10'
       id='price-section'
     >
       {!!activePrice && activePrice.price > 0 && (
@@ -97,20 +96,33 @@ const PriceAction = ({ product }: Props) => {
 
       <div className='h-4' />
       <div className='flex gap-x-5 items-center'>
-        <div>
-          <label htmlFor='quantity' className='hidden'>
-            Quantity
-          </label>
-          <div className='flex items-center space-x-2'>
-            <input
-              type='number'
-              id='quantity'
-              value={quantityInput}
-              onChange={(e) => setQuantityInput(e.target.value)}
-              className={style['quantity-input']}
-            />
-          </div>
+        <div className='relative flex items-center'>
+          <button
+            type='button'
+            className='absolute left-0 px-2 py-1 h-full text-gray-500'
+            onClick={() =>
+              setQuantityInput(String(Math.max(1, Number(quantityInput) - 1)))
+            }
+          >
+            -
+          </button>
+          <input
+            type='number'
+            id='quantity'
+            min={1}
+            value={quantityInput}
+            onChange={(e) => setQuantityInput(e.target.value)}
+            className={style['quantity-input']}
+          />
+          <button
+            type='button'
+            className='absolute right-0 px-2 py-1 h-full text-gray-500'
+            onClick={() => setQuantityInput(String(Number(quantityInput) + 1))}
+          >
+            +
+          </button>
         </div>
+
         <div>
           <span className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}>
             {' '}