♻️ enhan: disable btn when loading

:%s

pages/test.tsx

@@ -1,85 +1,19 @@
+import { useEffect, useState } from 'react'
 import {
-  FeaturedProductCard,
+  ButtonCommon, Layout
-  Layout
+} from 'src/components/common'
-} from 'src/components/common';
-import { HomeBanner } from 'src/components/modules/home';
-// import { RecipeListPage } from 'src/components/modules/recipes';
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
-import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';
-
-const CATEGORY = [
-  {
-    name: 'All',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
-  },
-  {
-    name: 'Veggie',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-  },
-  {
-    name: 'Seafood',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-  },
-  {
-    name: 'Frozen',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-  },
-  {
-    name: 'Coffee Bean',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
-  },
-  {
-    name: 'Sauce',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
-  },
-]
-const BRAND = [
-  {
-    name: 'Maggi',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-  },
-  {
-    name: 'Cholimes',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-  },
-  {
-    name: 'Chinsu',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-  }]
-
-const FEATURED = [
-
-  {
-    name: 'Best Sellers',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-  },
-  {
-    name: 'Sales',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-  },
-  {
-    name: 'New Item',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-  },
-  {
-    name: 'Viewed',
-    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
-  }
-];
-
-
-
-const data = PRODUCT_DATA_TEST[0]
 export default function Test() {
+  const [isLoading, setisLoading] = useState(false)
+  useEffect(() => {
+    setTimeout(() => {
+      setisLoading(true)
+    }, 3000)
+  }, [])
   return (
     <>
-      <FeaturedProductCard
+      <ButtonCommon loading={isLoading}>Back to home</ButtonCommon>
-        imageSrc={data.imageSrc}
+      <ButtonCommon type='light' loading={isLoading}>Back to home</ButtonCommon>
-        title="Sale 25% coffee bean"
+      <ButtonCommon type='ghost' loading={isLoading}>Back to home</ButtonCommon>
-        subTitle="50 first orders within a day"
-        price={data.price}
-        originPrice="$20.00" />
-      <HomeBanner/>
     </>
   )
 }

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -2,6 +2,32 @@
 
 .buttonCommon {
   @apply shape-common;
+  &:hover {
+    .inner {
+      @apply shadow-md;
+      &:not(:disabled) {
+        filter: brightness(1.05);
+      }
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    .inner {
+      filter: brightness(0.8) !important;
+      color: var(--disabled);
+    }
+  }
+  
+  &:focus {
+    outline: none;
+    .inner {
+      filter: brightness(1.05);
+    }
+  }
+  &:focus-visible {
+    outline: 2px solid var(--text-active);
+  }
   .inner {
     padding: 1rem 2rem;
     @apply bg-primary transition-all duration-200 text-white font-bold;
@@ -14,37 +40,19 @@
     @screen lg {
       padding: 1.6rem 3.2rem;
     }
-    &:disabled {
-      filter: brightness(0.9);
-      cursor: not-allowed;
-      color: var(--disabled);
-    }
-    &:hover {
-      @apply shadow-md;
-      &:not(:disabled) {
-        filter: brightness(1.05);
-      }
-    }
-    &:focus {
-      outline: none;
-      filter: brightness(1.05);
-    }
-    &:focus-visible {
-      outline: 2px solid var(--text-active);
-    }
   }
   &.loading {
     .inner {
       &::after {
         content: "";
         border-radius: 50%;
-        width: 1.6rem;
+        width: 1.8rem;
-        height: 1.6rem;
+        height: 1.8rem;
         border: 3px solid rgba(170, 170, 170, 0.5);
         border-top: 3px solid var(--white);
         -webkit-animation: spin 2s linear infinite;
         animation: spin 2s linear infinite;
-        margin-right: 0.8rem;
+        margin-left: 0.8rem;
       }
     }
   }
@@ -60,7 +68,7 @@
     &.loading {
       .inner {
         &::after {
-          border-top-color: var(--primary);
+          border-top-color: var(--text-active);
         }
       }
     }
@@ -87,7 +95,7 @@
     }
     &.loading {
       .inner::after {
-        border-top-color: var(--text-active);
+        border-top-color: var(--primary);
       }
     }
   }
@@ -105,14 +113,14 @@
   }
   &.small {
     .inner {
-      padding: .5rem 1rem;
+      padding: 0.5rem 1rem;
       &.onlyIcon {
         padding: 1rem;
       }
       @screen md {
-        padding: .8rem 1.6rem;
+        padding: 0.8rem 1.6rem;
         &.onlyIcon {
-          padding: .8rem;
+          padding: 0.8rem;
         }
       }
     }

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -24,7 +24,7 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false
             [s.preserve]: isIconSuffix,
             [s.onlyIcon]: icon && !children,
         })}
-            disabled={disabled}
+            disabled={disabled || loading}
             onClick={onClick}
         >
             <div className={s.inner}>

src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx

@@ -28,6 +28,8 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
     const onSignup = () => {
         // TODO: validate fields
         signup({ email, password })
+        // TODO:
+        alert("User created. Please verify your email")
     }