mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
♻️ enhan: disable btn when loading
:%s
This commit is contained in:
parent
75bea33a0f
commit
c0e703e1ae
@ -1,85 +1,19 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
FeaturedProductCard,
|
||||
Layout
|
||||
} 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]
|
||||
ButtonCommon, Layout
|
||||
} from 'src/components/common'
|
||||
export default function Test() {
|
||||
const [isLoading, setisLoading] = useState(false)
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setisLoading(true)
|
||||
}, 3000)
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
<FeaturedProductCard
|
||||
imageSrc={data.imageSrc}
|
||||
title="Sale 25% coffee bean"
|
||||
subTitle="50 first orders within a day"
|
||||
price={data.price}
|
||||
originPrice="$20.00" />
|
||||
<HomeBanner/>
|
||||
<ButtonCommon loading={isLoading}>Back to home</ButtonCommon>
|
||||
<ButtonCommon type='light' loading={isLoading}>Back to home</ButtonCommon>
|
||||
<ButtonCommon type='ghost' loading={isLoading}>Back to home</ButtonCommon>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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;
|
||||
height: 1.6rem;
|
||||
width: 1.8rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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}>
|
||||
|
@ -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")
|
||||
}
|
||||
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user