From b72aba0eb38b14e0f130bce518074fe25f6e461e Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 7 Sep 2021 15:40:34 +0700 Subject: [PATCH 01/17] update --- next-env.d.ts | 3 +++ pages/test.tsx | 1 + 2 files changed, 4 insertions(+) diff --git a/next-env.d.ts b/next-env.d.ts index c6643fda1..9bc3dd46b 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,3 +1,6 @@ /// /// /// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/pages/test.tsx b/pages/test.tsx index 970588581..0e95fddf6 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -3,6 +3,7 @@ import { ButtonCommon, Layout, ModalInfo } from 'src/components/common' + export default function Test() { const [visible, setVisible] = useState(false) const onClose = () => { From 3f0af5ac858c2524b94c68f8386c7076e0e4dad4 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Wed, 8 Sep 2021 09:51:06 +0700 Subject: [PATCH 02/17] update --- pages/index.tsx | 7 ++- pages/test.tsx | 20 ++------ src/components/common/Layout/Layout.tsx | 22 ++++---- .../CheckoutSuccess.module.scss | 48 ++++++++++++++++++ .../CheckoutSuccess/CheckoutSuccess.tsx | 46 +++++++++++++++++ .../CheckoutSuccess/assets/checkIcon.png | Bin 0 -> 2445 bytes .../CheckoutSuccess/assets/coffeeBean.png | Bin 0 -> 4206 bytes .../checkout/CheckoutSuccess/assets/fish.png | Bin 0 -> 5868 bytes .../CheckoutSuccess/assets/freezeShrimp.png | Bin 0 -> 6799 bytes .../checkout/CheckoutSuccess/assets/veget.png | Bin 0 -> 6634 bytes 10 files changed, 115 insertions(+), 28 deletions(-) create mode 100644 src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss create mode 100644 src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx create mode 100644 src/components/modules/checkout/CheckoutSuccess/assets/checkIcon.png create mode 100644 src/components/modules/checkout/CheckoutSuccess/assets/coffeeBean.png create mode 100644 src/components/modules/checkout/CheckoutSuccess/assets/fish.png create mode 100644 src/components/modules/checkout/CheckoutSuccess/assets/freezeShrimp.png create mode 100644 src/components/modules/checkout/CheckoutSuccess/assets/veget.png diff --git a/pages/index.tsx b/pages/index.tsx index 7d23ebadd..cc77bafca 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,17 +1,20 @@ import { Layout } from 'src/components/common'; import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; +import Test from './test'; export default function Home() { return ( <> - + + + {/* - + */} {/* // todo: uncomment */} {/* */} diff --git a/pages/test.tsx b/pages/test.tsx index 0e95fddf6..73945053e 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,23 +1,13 @@ import { useState } from 'react' -import { - ButtonCommon, - Layout, ModalInfo -} from 'src/components/common' +import { ButtonCommon, Layout, ModalInfo } from 'src/components/common' + +import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess' export default function Test() { - const [visible, setVisible] = useState(false) - const onClose = () => { - setVisible(false) - } - const onOpen = () => { - setVisible(true) - } + return ( <> - open - - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi? - + ) } diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 17f520185..18fa73b33 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -15,24 +15,24 @@ interface Props { // note: demo code const Layout: FC = ({ children }) => { const { locale = 'en-US' } = useRouter() - const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false }) + // const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false }) - const toggle = () => { - if (visibleCartDrawer) { - closeCartDrawer() - } else { - openModal() - } - } + // const toggle = () => { + // if (visibleCartDrawer) { + // closeCartDrawer() + // } else { + // openModal() + // } + // } return (
{children}
- - toggle card: {visibleCartDrawer.toString()} */} + {/* + onClose={closeCartDrawer} /> */}
diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss new file mode 100644 index 000000000..73f69f7bf --- /dev/null +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss @@ -0,0 +1,48 @@ +@import '../../../../styles/utilities'; + +.checkoutSuccessWrapper { + @apply flex items-center justify-center; + margin-top: -3.2rem; + + .checkoutSuccess { + border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%; + max-width: 77.6rem; + height: fit-content; + background: + url('./assets/veget.png') left 0 top 0 no-repeat, + url('./assets/fish.png') right 0 top 0 no-repeat, + url('./assets/freezeShrimp.png') right 0 bottom 0 no-repeat, + url('./assets/coffeeBean.png') left 0 bottom 0 no-repeat; + background-color: #E3F2E9; + + .checkoutContent { + @apply text-center; + margin: 7.2rem 4.8rem 6.4rem 4.8rem; + + .checkoutMsg { + @apply heading-1 font-heading; + margin-top: 3.2rem; + margin-bottom: 1.6rem; + } + + .checkoutSubMsg { + @apply sub-headline; + margin-bottom: 4rem; + } + + .backToHomeBtn { + @apply flex cursor-pointer font-bold items-center justify-center; + color: white; + background-color: var(--primary); + margin: auto; + // border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%; // to do + width: fit-content; + padding: 1.6rem 3.2rem 1.6rem 3.2rem; + + .arrowRight { + margin-left: 1.4rem; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx new file mode 100644 index 000000000..23f98046e --- /dev/null +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import s from './CheckoutSuccess.module.scss'; + +import Image from "next/image"; +import Link from "next/link"; + +import checkIcon from './assets/checkIcon.png'; + +const CheckoutSuccess = () => { + + return ( +
+
+
+
+ check icon +
+ +
Your purchase has been successed!
+
Last call! Shop deep deals on 100+ bulk picks while you can.
+ + +
+ +
+ + +
+ +
+
+ ) +} + +export default CheckoutSuccess \ No newline at end of file diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/checkIcon.png b/src/components/modules/checkout/CheckoutSuccess/assets/checkIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..9d97234fb0a3730cf088465d468da7e21d1b5f7b GIT binary patch literal 2445 zcmV;833B#{P)hY7(W}HgJXFGh{}MUCYJ3~DsLt$ zu)KnFRuILNs_@f&Pwu%b*_M#*Pj^e*;(M?~^%d&=bndz5AA}0Ae6+Lp=lNh6B}M}2 zbBP!sV3b{@Xkalx7Z76t>I$M*622pX&TmQ5IooP>p&}qm5t^_tT*5h6Q>3k5BPlnq zgD5*G!OQP9p0r_#m7q#-QAB%ve~1+~)zkH7ox;TcRA6C;qN?bbrL z4H9-HPTE+gEl=se>-%4~U_vOJz|JvQNBc$ zLg3$zcA~lY@JRi#Wtahw!1mSeSGzxKHDf4WnUt+$}1Nxe3&| zZa#dhUhY5<5Ovi}v@^So;!vb9Ttc@!BpvHY%Ao;^i3}nka0wAVCy-0(5h5r80nJzc zI^2bv$VDJ;*~a|b3-$C%kOKs8rVg2x!Bx_37u-hcCp$|ih$VqSnMrw72zD+nuI}a8 z(%uC2$a~{`P$)@LANNdLCarb}x@Q#DpYKGHf_?S!Z~l^ru_AHBmqafDbCLIvxMq7w zE|(@!hMR!&z>i3O5}gUmL!MN`g%?-*?TUQWj}nOw+~4I#q7#As>H#Olc&+pLeB7CV?YMgs4ie7T7zj=%xRDBYT*(_SXLp35Q>V+quHuMxg= z@i1fxD|OnkE@1mnqIy0%x|bKp?Q!~WtPY%?pL^;;9!uV=k;iD?Z+7_J9hNS#pFi&6 zNCH{JRrqHeY#=z8m2Eo;eD5Ts)s5pI2}hbnT^mUtVqjIWeA>Rcf4C1bj@SSBy6JK{ zbC_<_seFyVUUVe_Bb3vx3}m<=5SQsbKa+VCMYkH^HEZO$1ftz!5ty#DE6jwI4Sp6j z{H+TSwuhx~fI!xLHt9p878|B;!=MjB`&M2Ymcju7?YfU*g!BMzDD+m=!4CtJ6b`(n z|AJGGR^3N}g-BaaW3Z`#fZJJa24j_MKl}AO z-Sw$l;INx)1lwvmj2yv~>4$&ns^uMAEV>(IqN+E&qcdteIAG z4x_HpXC^NL7cPMZ_*t>HMaLpQy<;;13C+nNlE+X(xRA#nz`uYeq)K|3t}EiS(24bI zFB=IAAm~8N;7T4t`Mcf~TS1Um-a`@VL6P+KvSDG|zW-IN2=pOOp_3=zk*O?4Ne zQK-|^Od#Srs1bb06Bo$}B~c25ucqT8lRmHC!tvUt7(x$ zss(}5CXd0TCZ_9>Fbb84VzmE45;5dJzbaLK5YUfB0xv5Rp)UryYV`z zG>4172RY#|WlG%xomi(VEgHZ8omz-IZ3R{&I=mC5@-h9=$)A{BwtzF$>Zu=Th|kJ$MgT1z)rbIulgbPt(|u;?Q;x@g?j9hJOS`NEh7xu@t&h7Y$aEiW znpaUgoE#e<(6PV}M1V(S9w=3VpQYhY21g^fxfT!9Qs`2#euK7hHoCyxnJ}v5>l%Ss z#X8t$2&k>>TX$DS=s>PRGv%=E>tk#}cQ)Yfgk z-uP-{JYZ}{A2Hdo9w^z$))yy_Y>s#BkR60}@|c4Fug31ku>^8bd7Rh|BSdc_>9KaKa|NrM5Bb}2+ol4V z?|)AY>gKKF7!=fbwQ+dcw#b^+56Mtg4f`kJS6ILfg0fAlAhk!$!^Mq>B^To0BZ=;31|k5dRb-xurvVA9gL za9wHhwF2`CJFN5aG!qq?AGmt*u&ET?HWUJn=Y$Rtz2kapNg{4sUX2`ociEU*6ey$q z*knSnZ1-W!C_0|15P=L`kqY?KR_R(hC=Y`W4~h;7Doh}Qw=_}kRF65H0k8@Ql&e}s z|6eHt_K{5l!pHsx%(OtU1lTQeSa+!e_Hp-rU+$n_-G~v?0TY~II1vK-s9YkaF#K_% z1opwMln7{3DWA28A2z+AwyB))QSjry-SH}vqz)V8+PjkCh+G^cU#i@8o2x9QnV6qC zfuDjSJ=|`~9izIC6EV`QXIb~ukfdf6WV$5z!=J;Tn9K93tYr8DAA<=|wjAFR00000 LNkvXXu0mjf^b?Jr literal 0 HcmV?d00001 diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/coffeeBean.png b/src/components/modules/checkout/CheckoutSuccess/assets/coffeeBean.png new file mode 100644 index 0000000000000000000000000000000000000000..742f30b684a14e6368a258583b52ebf656501a25 GIT binary patch literal 4206 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 Ef_O~{wg3PC literal 0 HcmV?d00001 diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/fish.png b/src/components/modules/checkout/CheckoutSuccess/assets/fish.png new file mode 100644 index 0000000000000000000000000000000000000000..14f676f641b2856bf444711fc4dfde3e0beaabf6 GIT binary patch literal 5868 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 literal 0 HcmV?d00001 diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/veget.png b/src/components/modules/checkout/CheckoutSuccess/assets/veget.png new file mode 100644 index 0000000000000000000000000000000000000000..83b8f51cc1b5e1a15e6fa92a919882e386ffff67 GIT binary patch literal 6634 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 XIwYHdI#2r_G=rtBuBTQDw2As3D|@-b literal 0 HcmV?d00001 From c614b8d42879c2ed32bbcd2119d306af0bae936d Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Wed, 8 Sep 2021 10:10:01 +0700 Subject: [PATCH 03/17] update --- pages/test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/test.tsx b/pages/test.tsx index 73945053e..dd5b91a2b 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { ButtonCommon, Layout, ModalInfo } from 'src/components/common' +import { ButtonCommon, Layout } from 'src/components/common' import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess' From 943c739143a17aef8793cbebaba0189d6f185032 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Wed, 8 Sep 2021 14:28:26 +0700 Subject: [PATCH 04/17] :sparkles: feat: Checkout Success --- .../CheckoutSuccess.module.scss | 2 +- .../CheckoutSuccess/CheckoutSuccess.tsx | 21 ++++++++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss index 73f69f7bf..5b4f4cc66 100644 --- a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss @@ -35,7 +35,7 @@ color: white; background-color: var(--primary); margin: auto; - // border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%; // to do + border-radius: 76% 80% 17% 30% / 40% 35% 80% 30%; width: fit-content; padding: 1.6rem 3.2rem 1.6rem 3.2rem; diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx index 23f98046e..f190602dd 100644 --- a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import s from './CheckoutSuccess.module.scss'; import Image from "next/image"; @@ -7,8 +7,15 @@ import Link from "next/link"; import checkIcon from './assets/checkIcon.png'; const CheckoutSuccess = () => { - - return ( + const [isShown, setIsShown] = useState(false); + + useEffect(() => { + setTimeout(() => { + setIsShown(true); + }, 3000); + }, [3000]); + + return isShown ? (
@@ -32,15 +39,9 @@ const CheckoutSuccess = () => {
- -
- - -
-
- ) + ) : null } export default CheckoutSuccess \ No newline at end of file From 1cc64c6fd06654783a613f88d1ed645df643380c Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Wed, 8 Sep 2021 14:28:47 +0700 Subject: [PATCH 05/17] :sparkles: feat: Loading Common --- .../LoadingCommon/LoadingCommon.module.scss | 31 +++++++++++++++++++ .../common/LoadingCommon/LoadingCommon.tsx | 26 ++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 src/components/common/LoadingCommon/LoadingCommon.module.scss create mode 100644 src/components/common/LoadingCommon/LoadingCommon.tsx diff --git a/src/components/common/LoadingCommon/LoadingCommon.module.scss b/src/components/common/LoadingCommon/LoadingCommon.module.scss new file mode 100644 index 000000000..12eaed54d --- /dev/null +++ b/src/components/common/LoadingCommon/LoadingCommon.module.scss @@ -0,0 +1,31 @@ +@import '../../../styles/utilities'; + +.loadingCommon:empty { + @apply bg-white; + border-radius: 50%; + border: .7rem solid var(--primary-lightest); + border-top: .7rem solid var(--primary); + animation: spin 2s linear infinite; + margin: auto; + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + + &.small { + height: 5rem; + width: 5rem; + } + + &.default { + height: 7rem; + width: 7rem; + } + + &.large { + height: 10rem; + width: 10rem; + } +} \ No newline at end of file diff --git a/src/components/common/LoadingCommon/LoadingCommon.tsx b/src/components/common/LoadingCommon/LoadingCommon.tsx new file mode 100644 index 000000000..bc2b4e53a --- /dev/null +++ b/src/components/common/LoadingCommon/LoadingCommon.tsx @@ -0,0 +1,26 @@ +import classNames from "classnames"; +import React from "react"; +import s from './LoadingCommon.module.scss' + +interface LoadingCommonProps { + visible: boolean + size?: "small" | "default" | "large", + children? : React.ReactNode; +} + +const LoadingCommon = ({ visible, size="default", children }: LoadingCommonProps) => { + + return ( + <> + { + visible &&
+ {children} +
+ } + + ) +} + +export default LoadingCommon \ No newline at end of file From bfbdb23c70bfdc57f8dead8e94159418bb8ff2d7 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Thu, 9 Sep 2021 08:24:47 +0700 Subject: [PATCH 06/17] :sparkles: feat: Skeleton Common --- .../SkeletonCommon/SkeletonCommon.module.scss | 32 ++++++++++++ .../common/SkeletonCommon/SkeletonCommon.tsx | 17 +++++++ .../SkeletonAvatar/SkeletonAvatar.module.scss | 51 +++++++++++++++++++ .../SkeletonAvatar/SkeletonAvatar.tsx | 25 +++++++++ .../SkeletonParagraph.module.scss | 41 +++++++++++++++ .../SkeletonParagraph/SkeletonParagraph.tsx | 30 +++++++++++ .../SkeletonTitle/SkeletonTitle.module.scss | 27 ++++++++++ .../SkeletonTitle/SkeletonTitle.tsx | 28 ++++++++++ 8 files changed, 251 insertions(+) create mode 100644 src/components/common/SkeletonCommon/SkeletonCommon.module.scss create mode 100644 src/components/common/SkeletonCommon/SkeletonCommon.tsx create mode 100644 src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.module.scss create mode 100644 src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.tsx create mode 100644 src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.module.scss create mode 100644 src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.tsx create mode 100644 src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.module.scss create mode 100644 src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.tsx diff --git a/src/components/common/SkeletonCommon/SkeletonCommon.module.scss b/src/components/common/SkeletonCommon/SkeletonCommon.module.scss new file mode 100644 index 000000000..e388525e5 --- /dev/null +++ b/src/components/common/SkeletonCommon/SkeletonCommon.module.scss @@ -0,0 +1,32 @@ +@import '../../../styles/utilities'; + +$base-color: #ddd; +$shine-color: #e8e8e8; +$animation-duration: 1.6s; + +@mixin background-gradient { + background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px) ; + background-size: 600px; +} + +.skeletonCommon:empty { + margin: auto; + height: 14rem; + width: 14rem; + animation: name duration timing-function delay iteration-count direction fill-mode; + + @include background-gradient; + animation: shine-lines $animation-duration infinite linear; +} + +@keyframes shine-lines { + 0% { + background-position: -100px; + } + 40% { + background-position: 140px; + } + 100% { + background-position: 140px; + } +} \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/SkeletonCommon.tsx b/src/components/common/SkeletonCommon/SkeletonCommon.tsx new file mode 100644 index 000000000..6b0631aef --- /dev/null +++ b/src/components/common/SkeletonCommon/SkeletonCommon.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import s from './SkeletonCommon.module.scss' + +interface SkeletonCommonProps { + children? : React.ReactNode; +} + +const SkeletonCommon = ({ children }: SkeletonCommonProps) => { + + return ( +
+ {children} +
+ ) +} + +export default SkeletonCommon \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.module.scss b/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.module.scss new file mode 100644 index 000000000..82286d7a0 --- /dev/null +++ b/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.module.scss @@ -0,0 +1,51 @@ +@import '../../../../../styles/utilities'; + +$base-color: #8F8F8F; +$shine-color: #ebebeb; +$animation-duration: 1.6s; +$avatar-offset: 52 + 16; + +@mixin background-gradient { + background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px) ; + background-size: 600px; +} + +.skeletonAvatar { + + &.active { + @include background-gradient; + animation: shine-avatar $animation-duration infinite linear; + } + + &.circle { + border-radius: 50%; + } + + &.square { + border-radius: 0; + } + + &.small { + width: 3.2rem; + height: 3.2rem; + } + &.default { + width: 4.8rem; + height: 4.8rem; + } + &.large { + width: 6.4rem; + height: 6.4rem; + } +} + +@keyframes shine-avatar { + 0% { + background-position: -100px + $avatar-offset + } + + 40%, 100% { + background-position: 140px + $avatar-offset + } + +} diff --git a/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.tsx b/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.tsx new file mode 100644 index 000000000..d5d20165b --- /dev/null +++ b/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.tsx @@ -0,0 +1,25 @@ +import classNames from "classnames"; +import React from "react"; +import s from './SkeletonAvatar.module.scss' + +interface SkeletonAvatarProps { + active?: boolean, + shape?: "circle" | "square", + size?: "small" | "default" | "large", + children: React.ReactNode +} + +const SkeletonAvatar = ({ active=true, shape="circle", size="default", children }: SkeletonAvatarProps) => { + + return ( +
+ {children} +
+ ) +} + +export default SkeletonAvatar \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.module.scss b/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.module.scss new file mode 100644 index 000000000..259c1574c --- /dev/null +++ b/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.module.scss @@ -0,0 +1,41 @@ +@import '../../../../../styles/utilities'; + +$base-color: #DDD; +$shine-color: #ebebeb; +$animation-duration: 2s; + +@mixin background-gradient { + background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px) ; + background-size: 100%; +} + +.skeletonParagraph { + @apply bg-white; + height: fit-content; + width: 100%; + + .row { + height: 2rem; + margin: 1rem; + animation: shine-lines $animation-duration infinite linear; + @include background-gradient; + } + + .lastRow { + height: 2rem; + margin: 1rem; + width: 85%; + animation: shine-lines $animation-duration infinite linear; + @include background-gradient; + } +} + +@keyframes shine-lines { + 0% { + background-position: -100px; + } + 40%, 100% { + background-position: 100%; + } +} + diff --git a/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.tsx b/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.tsx new file mode 100644 index 000000000..5c3620f0a --- /dev/null +++ b/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.tsx @@ -0,0 +1,30 @@ +import classNames from "classnames"; +import React from "react"; +import s from './SkeletonParagraph.module.scss' + +interface SkeletonParagraphProps { + active?: boolean, + rows?: number // number of rows in paragraph + children: React.ReactNode +} + +const SkeletonParagraph = ({ active=true, rows=2, children }: SkeletonParagraphProps) => { + + return ( +
+ { + [...Array(rows)].map((e, i) => { + if (i === rows-1) { + return

+ } + return

+ }) + } + {children} +
+ ) +} + +export default SkeletonParagraph \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.module.scss b/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.module.scss new file mode 100644 index 000000000..0dbb139d3 --- /dev/null +++ b/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.module.scss @@ -0,0 +1,27 @@ +@import '../../../../../styles/utilities'; + +$base-color: #8F8F8F; +$shine-color: #ebebeb; +$animation-duration: 1.6s; + +@mixin background-gradient { + background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px) ; + background-size: 600px; +} + +.skeletonTitle { + &.active { + @include background-gradient; + animation: shine-lines $animation-duration infinite linear; + } +} + +@keyframes shine-lines { + 0% { + background-position: -100px; + } + 40%, 100% { + background-position: 50rem; + } +} + diff --git a/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.tsx b/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.tsx new file mode 100644 index 000000000..40d747d8f --- /dev/null +++ b/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.tsx @@ -0,0 +1,28 @@ +import classNames from "classnames"; +import React from "react"; +import s from './SkeletonTitle.module.scss' + +interface SkeletonTitleProps { + active?: boolean, + width: string | number, // number px + height: string | number, + children: React.ReactNode +} + +const SkeletonTitle = ({ active=true, width, height, children }: SkeletonTitleProps) => { + + const styles = { + width: width, + height: height + } + + return ( +
+ {children} +
+ ) +} + +export default SkeletonTitle \ No newline at end of file From 21684697b514bdcb680217a052c94b2fbc6c952d Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Thu, 9 Sep 2021 08:25:09 +0700 Subject: [PATCH 07/17] :sparkles: feat: Checkout Success --- .../modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx index f190602dd..16bfc67bd 100644 --- a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx @@ -12,8 +12,8 @@ const CheckoutSuccess = () => { useEffect(() => { setTimeout(() => { setIsShown(true); - }, 3000); - }, [3000]); + }, 1000); + }, [1000]); return isShown ? (
From d6686b8e2dfd4fe59e864814f8635a95bba7b759 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Thu, 9 Sep 2021 08:25:28 +0700 Subject: [PATCH 08/17] :sparkles: feat: Loading Common --- .../common/LoadingCommon/LoadingCommon.module.scss | 1 - src/components/common/LoadingCommon/LoadingCommon.tsx | 5 ++--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/common/LoadingCommon/LoadingCommon.module.scss b/src/components/common/LoadingCommon/LoadingCommon.module.scss index 12eaed54d..f8bca225d 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.module.scss +++ b/src/components/common/LoadingCommon/LoadingCommon.module.scss @@ -12,7 +12,6 @@ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } - &.small { height: 5rem; diff --git a/src/components/common/LoadingCommon/LoadingCommon.tsx b/src/components/common/LoadingCommon/LoadingCommon.tsx index bc2b4e53a..20377c0ed 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.tsx +++ b/src/components/common/LoadingCommon/LoadingCommon.tsx @@ -3,17 +3,16 @@ import React from "react"; import s from './LoadingCommon.module.scss' interface LoadingCommonProps { - visible: boolean size?: "small" | "default" | "large", children? : React.ReactNode; } -const LoadingCommon = ({ visible, size="default", children }: LoadingCommonProps) => { +const LoadingCommon = ({ size="default", children }: LoadingCommonProps) => { return ( <> { - visible &&
{children} From 42207a0756bec3adeaf90ecb46ba101cf8646689 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 13 Sep 2021 15:45:50 +0700 Subject: [PATCH 09/17] :sparkles: feat: Loading Common --- .../LoadingCommon/LoadingCommon.module.scss | 9 +++++---- .../common/LoadingCommon/LoadingCommon.tsx | 10 ++-------- .../common/LoadingCommon/assets/broccoli.png | Bin 0 -> 2458 bytes .../common/LoadingCommon/assets/carrot.png | Bin 0 -> 2096 bytes 4 files changed, 7 insertions(+), 12 deletions(-) create mode 100644 src/components/common/LoadingCommon/assets/broccoli.png create mode 100644 src/components/common/LoadingCommon/assets/carrot.png diff --git a/src/components/common/LoadingCommon/LoadingCommon.module.scss b/src/components/common/LoadingCommon/LoadingCommon.module.scss index f8bca225d..e1882523c 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.module.scss +++ b/src/components/common/LoadingCommon/LoadingCommon.module.scss @@ -2,12 +2,14 @@ .loadingCommon:empty { @apply bg-white; + height: 7rem; + width: 7rem; border-radius: 50%; - border: .7rem solid var(--primary-lightest); - border-top: .7rem solid var(--primary); animation: spin 2s linear infinite; margin: auto; + background: url('./assets/carrot.png') top 50% left 50% no-repeat; + @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } @@ -19,8 +21,7 @@ } &.default { - height: 7rem; - width: 7rem; + } &.large { diff --git a/src/components/common/LoadingCommon/LoadingCommon.tsx b/src/components/common/LoadingCommon/LoadingCommon.tsx index 20377c0ed..79993507e 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.tsx +++ b/src/components/common/LoadingCommon/LoadingCommon.tsx @@ -1,23 +1,17 @@ -import classNames from "classnames"; import React from "react"; import s from './LoadingCommon.module.scss' interface LoadingCommonProps { - size?: "small" | "default" | "large", children? : React.ReactNode; } -const LoadingCommon = ({ size="default", children }: LoadingCommonProps) => { +const LoadingCommon = ({ children }: LoadingCommonProps) => { return ( <> - { -
+
{children}
- } ) } diff --git a/src/components/common/LoadingCommon/assets/broccoli.png b/src/components/common/LoadingCommon/assets/broccoli.png new file mode 100644 index 0000000000000000000000000000000000000000..9080e23362d4408ad522ea8660adc31684f2dff8 GIT binary patch literal 2458 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 Date: Mon, 13 Sep 2021 15:46:08 +0700 Subject: [PATCH 10/17] :sparkles: feat: Skeleton Common --- .../SkeletonCommon/SkeletonCommon.module.scss | 32 ---------- .../common/SkeletonCommon/SkeletonCommon.tsx | 17 ----- .../SkeletonImage/SkeletonImage.module.scss | 53 ++++++++++++++++ .../SkeletonImage/SkeletonImage.tsx | 22 +++++++ .../SkeletonParagraph.module.scss | 63 +++++++++++++++++++ .../SkeletonParagraph/SkeletonParagraph.tsx | 31 +++++++++ .../SkeletonAvatar/SkeletonAvatar.module.scss | 51 --------------- .../SkeletonAvatar/SkeletonAvatar.tsx | 25 -------- .../SkeletonParagraph.module.scss | 41 ------------ .../SkeletonParagraph/SkeletonParagraph.tsx | 30 --------- .../SkeletonTitle/SkeletonTitle.module.scss | 27 -------- .../SkeletonTitle/SkeletonTitle.tsx | 28 --------- 12 files changed, 169 insertions(+), 251 deletions(-) delete mode 100644 src/components/common/SkeletonCommon/SkeletonCommon.module.scss delete mode 100644 src/components/common/SkeletonCommon/SkeletonCommon.tsx create mode 100644 src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss create mode 100644 src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx create mode 100644 src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss create mode 100644 src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx delete mode 100644 src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.module.scss delete mode 100644 src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.tsx delete mode 100644 src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.module.scss delete mode 100644 src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.tsx delete mode 100644 src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.module.scss delete mode 100644 src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.tsx diff --git a/src/components/common/SkeletonCommon/SkeletonCommon.module.scss b/src/components/common/SkeletonCommon/SkeletonCommon.module.scss deleted file mode 100644 index e388525e5..000000000 --- a/src/components/common/SkeletonCommon/SkeletonCommon.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../../styles/utilities'; - -$base-color: #ddd; -$shine-color: #e8e8e8; -$animation-duration: 1.6s; - -@mixin background-gradient { - background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px) ; - background-size: 600px; -} - -.skeletonCommon:empty { - margin: auto; - height: 14rem; - width: 14rem; - animation: name duration timing-function delay iteration-count direction fill-mode; - - @include background-gradient; - animation: shine-lines $animation-duration infinite linear; -} - -@keyframes shine-lines { - 0% { - background-position: -100px; - } - 40% { - background-position: 140px; - } - 100% { - background-position: 140px; - } -} \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/SkeletonCommon.tsx b/src/components/common/SkeletonCommon/SkeletonCommon.tsx deleted file mode 100644 index 6b0631aef..000000000 --- a/src/components/common/SkeletonCommon/SkeletonCommon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import s from './SkeletonCommon.module.scss' - -interface SkeletonCommonProps { - children? : React.ReactNode; -} - -const SkeletonCommon = ({ children }: SkeletonCommonProps) => { - - return ( -
- {children} -
- ) -} - -export default SkeletonCommon \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss new file mode 100644 index 000000000..57fdf3ebc --- /dev/null +++ b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss @@ -0,0 +1,53 @@ +@import '../../../../styles/utilities'; + +.skeletonImage:empty { + @apply relative; + background: #DDDBDD; + + &.small { + width: 10rem; + height: 10rem; + } + + &.default { + width: 15rem; + height: 15rem; + } + + &.large { + width: 20rem; + height: 20rem; + } + + &.left { + margin-left: 0; + } + + &.center { + margin: auto; + } + + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translateX(-100%); + background-image: linear-gradient( + 90deg, + rgba(#fff, 0) 0, + rgba(#fff, 0.2) 20%, + rgba(#fff, 0.5) 60%, + rgba(#fff, 0) + ); + animation: shimmer 2s infinite; + content: ''; + } +} + +@keyframes shimmer { + 100% { + transform: translateX(100%); + } +} diff --git a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx new file mode 100644 index 000000000..7ab20b037 --- /dev/null +++ b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx @@ -0,0 +1,22 @@ +import classNames from "classnames"; +import React from "react"; +import s from './SkeletonImage.module.scss' + +interface SkeletonImageProps { + align?: "left" | "center" + size?: "small" | "default" | "large" + children?: React.ReactNode +} + +const SkeletonImage = ({ align="center", size="default", children }: SkeletonImageProps) => { + return ( +
+ {children} +
+ ) +} + +export default SkeletonImage \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss new file mode 100644 index 000000000..2c98d00e5 --- /dev/null +++ b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss @@ -0,0 +1,63 @@ +@import '../../../../styles/utilities'; + +.skeletonParagraph { + .row { + display: inline-block; + height: 2rem; + width: 100%; + position: relative; + overflow: hidden; + background-color: #DDDBDD; + + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translateX(-100%); + background-image: linear-gradient( + 90deg, + rgba(#fff, 0) 0, + rgba(#fff, 0.2) 20%, + rgba(#fff, 0.5) 60%, + rgba(#fff, 0) + ); + animation: shimmer 2s infinite; + content: ''; + } + } + + .lastRow { + display: inline-block; + height: 2rem; + width: 80%; + position: relative; + overflow: hidden; + background-color: #DDDBDD; + + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translateX(-100%); + background-image: linear-gradient( + 90deg, + rgba(#fff, 0) 0, + rgba(#fff, 0.2) 20%, + rgba(#fff, 0.5) 60%, + rgba(#fff, 0) + ); + animation: shimmer 2s infinite; + content: ''; + } + } +} + +@keyframes shimmer { + 100% { + transform: translateX(100%); + } +} diff --git a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx new file mode 100644 index 000000000..4baa35a52 --- /dev/null +++ b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx @@ -0,0 +1,31 @@ +import React, { useEffect, useState } from "react"; +import s from './SkeletonParagraph.module.scss' + +interface SkeletonParagraphProps { + rows?: number // number of rows in paragraph + children?: React.ReactNode +} + +const SkeletonParagraph = ({ rows=2, children }: SkeletonParagraphProps) => { + + const [isChildLoaded, setIsChildLoaded] = useState(false) + + useEffect(() => { + setIsChildLoaded(true); + }, []) + + return ( +
+ { + isChildLoaded ? children : [...Array(rows)].map((e, i) => { + if (i === rows-1) { + return
+ } + return
+ }) + } +
+ ) +} + +export default SkeletonParagraph \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.module.scss b/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.module.scss deleted file mode 100644 index 82286d7a0..000000000 --- a/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.module.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import '../../../../../styles/utilities'; - -$base-color: #8F8F8F; -$shine-color: #ebebeb; -$animation-duration: 1.6s; -$avatar-offset: 52 + 16; - -@mixin background-gradient { - background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px) ; - background-size: 600px; -} - -.skeletonAvatar { - - &.active { - @include background-gradient; - animation: shine-avatar $animation-duration infinite linear; - } - - &.circle { - border-radius: 50%; - } - - &.square { - border-radius: 0; - } - - &.small { - width: 3.2rem; - height: 3.2rem; - } - &.default { - width: 4.8rem; - height: 4.8rem; - } - &.large { - width: 6.4rem; - height: 6.4rem; - } -} - -@keyframes shine-avatar { - 0% { - background-position: -100px + $avatar-offset - } - - 40%, 100% { - background-position: 140px + $avatar-offset - } - -} diff --git a/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.tsx b/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.tsx deleted file mode 100644 index d5d20165b..000000000 --- a/src/components/common/SkeletonCommon/components/SkeletonAvatar/SkeletonAvatar.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import classNames from "classnames"; -import React from "react"; -import s from './SkeletonAvatar.module.scss' - -interface SkeletonAvatarProps { - active?: boolean, - shape?: "circle" | "square", - size?: "small" | "default" | "large", - children: React.ReactNode -} - -const SkeletonAvatar = ({ active=true, shape="circle", size="default", children }: SkeletonAvatarProps) => { - - return ( -
- {children} -
- ) -} - -export default SkeletonAvatar \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.module.scss b/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.module.scss deleted file mode 100644 index 259c1574c..000000000 --- a/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import '../../../../../styles/utilities'; - -$base-color: #DDD; -$shine-color: #ebebeb; -$animation-duration: 2s; - -@mixin background-gradient { - background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px) ; - background-size: 100%; -} - -.skeletonParagraph { - @apply bg-white; - height: fit-content; - width: 100%; - - .row { - height: 2rem; - margin: 1rem; - animation: shine-lines $animation-duration infinite linear; - @include background-gradient; - } - - .lastRow { - height: 2rem; - margin: 1rem; - width: 85%; - animation: shine-lines $animation-duration infinite linear; - @include background-gradient; - } -} - -@keyframes shine-lines { - 0% { - background-position: -100px; - } - 40%, 100% { - background-position: 100%; - } -} - diff --git a/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.tsx b/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.tsx deleted file mode 100644 index 5c3620f0a..000000000 --- a/src/components/common/SkeletonCommon/components/SkeletonParagraph/SkeletonParagraph.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import classNames from "classnames"; -import React from "react"; -import s from './SkeletonParagraph.module.scss' - -interface SkeletonParagraphProps { - active?: boolean, - rows?: number // number of rows in paragraph - children: React.ReactNode -} - -const SkeletonParagraph = ({ active=true, rows=2, children }: SkeletonParagraphProps) => { - - return ( -
- { - [...Array(rows)].map((e, i) => { - if (i === rows-1) { - return

- } - return

- }) - } - {children} -
- ) -} - -export default SkeletonParagraph \ No newline at end of file diff --git a/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.module.scss b/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.module.scss deleted file mode 100644 index 0dbb139d3..000000000 --- a/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.module.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import '../../../../../styles/utilities'; - -$base-color: #8F8F8F; -$shine-color: #ebebeb; -$animation-duration: 1.6s; - -@mixin background-gradient { - background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px) ; - background-size: 600px; -} - -.skeletonTitle { - &.active { - @include background-gradient; - animation: shine-lines $animation-duration infinite linear; - } -} - -@keyframes shine-lines { - 0% { - background-position: -100px; - } - 40%, 100% { - background-position: 50rem; - } -} - diff --git a/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.tsx b/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.tsx deleted file mode 100644 index 40d747d8f..000000000 --- a/src/components/common/SkeletonCommon/components/SkeletonTitle/SkeletonTitle.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import classNames from "classnames"; -import React from "react"; -import s from './SkeletonTitle.module.scss' - -interface SkeletonTitleProps { - active?: boolean, - width: string | number, // number px - height: string | number, - children: React.ReactNode -} - -const SkeletonTitle = ({ active=true, width, height, children }: SkeletonTitleProps) => { - - const styles = { - width: width, - height: height - } - - return ( -
- {children} -
- ) -} - -export default SkeletonTitle \ No newline at end of file From 214c9b868036f4b0328c38a194efff907c5e6a7c Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 13 Sep 2021 15:46:57 +0700 Subject: [PATCH 11/17] :sparkles: feat: Checkout Success --- .../CheckoutSuccess/CheckoutSuccess.module.scss | 3 +-- .../checkout/CheckoutSuccess/CheckoutSuccess.tsx | 14 +++----------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss index 5b4f4cc66..6307f49b7 100644 --- a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss @@ -31,11 +31,10 @@ } .backToHomeBtn { - @apply flex cursor-pointer font-bold items-center justify-center; + @apply flex cursor-pointer font-bold items-center justify-center custom-border-radius; color: white; background-color: var(--primary); margin: auto; - border-radius: 76% 80% 17% 30% / 40% 35% 80% 30%; width: fit-content; padding: 1.6rem 3.2rem 1.6rem 3.2rem; diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx index 16bfc67bd..c9ca54ed4 100644 --- a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import s from './CheckoutSuccess.module.scss'; import Image from "next/image"; @@ -7,15 +7,7 @@ import Link from "next/link"; import checkIcon from './assets/checkIcon.png'; const CheckoutSuccess = () => { - const [isShown, setIsShown] = useState(false); - - useEffect(() => { - setTimeout(() => { - setIsShown(true); - }, 1000); - }, [1000]); - - return isShown ? ( + return (
@@ -41,7 +33,7 @@ const CheckoutSuccess = () => {
- ) : null + ) } export default CheckoutSuccess \ No newline at end of file From 2656c56a6f1794ac148dae3f2df48060fd37819e Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 14:39:01 +0700 Subject: [PATCH 12/17] :sparkles: feat: Loading Common --- .../LoadingCommon/LoadingCommon.module.scss | 39 +++++++------------ .../common/LoadingCommon/LoadingCommon.tsx | 13 +++---- 2 files changed, 19 insertions(+), 33 deletions(-) diff --git a/src/components/common/LoadingCommon/LoadingCommon.module.scss b/src/components/common/LoadingCommon/LoadingCommon.module.scss index e1882523c..97ba57dd0 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.module.scss +++ b/src/components/common/LoadingCommon/LoadingCommon.module.scss @@ -1,31 +1,20 @@ @import '../../../styles/utilities'; -.loadingCommon:empty { - @apply bg-white; - height: 7rem; - width: 7rem; - border-radius: 50%; - animation: spin 2s linear infinite; - margin: auto; +.wrapper { + @apply text-center; - background: url('./assets/carrot.png') top 50% left 50% no-repeat; - - @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + .loadingCommon { + @apply bg-white; + height: 7rem; + width: 7rem; + border-radius: 50%; + animation: spin 2s linear infinite; + margin: auto; + background: url('./assets/carrot.png') top 50% left 50% no-repeat; } +} - &.small { - height: 5rem; - width: 5rem; - } - - &.default { - - } - - &.large { - height: 10rem; - width: 10rem; - } +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } \ No newline at end of file diff --git a/src/components/common/LoadingCommon/LoadingCommon.tsx b/src/components/common/LoadingCommon/LoadingCommon.tsx index 79993507e..d41ea8492 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.tsx +++ b/src/components/common/LoadingCommon/LoadingCommon.tsx @@ -1,18 +1,15 @@ import React from "react"; import s from './LoadingCommon.module.scss' -interface LoadingCommonProps { - children? : React.ReactNode; -} - -const LoadingCommon = ({ children }: LoadingCommonProps) => { +const LoadingCommon = () => { return ( - <> +
- {children} +
- +

Loading...

+
) } From 8d463e537d2491150a0f17df18e04df8ae6b7603 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 14:39:31 +0700 Subject: [PATCH 13/17] :sparkles: feat: Skeleton Common --- .../SkeletonImage/SkeletonImage.module.scss | 2 +- .../SkeletonCommon/SkeletonImage/SkeletonImage.tsx | 4 +--- .../SkeletonParagraph.module.scss | 4 +++- .../SkeletonParagraph/SkeletonParagraph.tsx | 14 +++----------- 4 files changed, 8 insertions(+), 16 deletions(-) diff --git a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss index 57fdf3ebc..d9607adec 100644 --- a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss +++ b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss @@ -1,6 +1,6 @@ @import '../../../../styles/utilities'; -.skeletonImage:empty { +.skeletonImage { @apply relative; background: #DDDBDD; diff --git a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx index 7ab20b037..e2c7c5e0f 100644 --- a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx +++ b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx @@ -5,16 +5,14 @@ import s from './SkeletonImage.module.scss' interface SkeletonImageProps { align?: "left" | "center" size?: "small" | "default" | "large" - children?: React.ReactNode } -const SkeletonImage = ({ align="center", size="default", children }: SkeletonImageProps) => { +const SkeletonImage = ({ align="center", size="default" }: SkeletonImageProps) => { return (
- {children}
) } diff --git a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss index 2c98d00e5..1ebd6e413 100644 --- a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss +++ b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss @@ -1,6 +1,8 @@ @import '../../../../styles/utilities'; -.skeletonParagraph { +.skeletonParagraph { + margin: 0 1.6rem; + .row { display: inline-block; height: 2rem; diff --git a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx index 4baa35a52..eadcff724 100644 --- a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx +++ b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx @@ -1,23 +1,15 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import s from './SkeletonParagraph.module.scss' interface SkeletonParagraphProps { rows?: number // number of rows in paragraph - children?: React.ReactNode } -const SkeletonParagraph = ({ rows=2, children }: SkeletonParagraphProps) => { - - const [isChildLoaded, setIsChildLoaded] = useState(false) - - useEffect(() => { - setIsChildLoaded(true); - }, []) - +const SkeletonParagraph = ({ rows=2 }: SkeletonParagraphProps) => { return (
{ - isChildLoaded ? children : [...Array(rows)].map((e, i) => { + [...Array(rows)].map((e, i) => { if (i === rows-1) { return
} From 2b2c1acca225a9d2c4d0e6db6325a95e911bb8ef Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 14:40:22 +0700 Subject: [PATCH 14/17] :sparkles: feat: Checkout Success --- .../CheckoutSuccess/CheckoutSuccess.module.scss | 11 +---------- .../checkout/CheckoutSuccess/CheckoutSuccess.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss index 6307f49b7..c7d4b2859 100644 --- a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss @@ -31,16 +31,7 @@ } .backToHomeBtn { - @apply flex cursor-pointer font-bold items-center justify-center custom-border-radius; - color: white; - background-color: var(--primary); - margin: auto; - width: fit-content; - padding: 1.6rem 3.2rem 1.6rem 3.2rem; - - .arrowRight { - margin-left: 1.4rem; - } + @apply flex justify-center; } } } diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx index c9ca54ed4..d82cc9c55 100644 --- a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx @@ -6,6 +6,9 @@ import Link from "next/link"; import checkIcon from './assets/checkIcon.png'; +import { ButtonCommon } from "src/components/common"; +import { IconArrowRight } from "src/components/icons"; + const CheckoutSuccess = () => { return (
@@ -18,17 +21,12 @@ const CheckoutSuccess = () => {
Your purchase has been successed!
Last call! Shop deep deals on 100+ bulk picks while you can.
-
From b786f1313a0a127c9f3bd1270a10f40eabd22702 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 14:44:39 +0700 Subject: [PATCH 15/17] :sparkles: feat: Checkout Success --- .../modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx index d82cc9c55..277cd5e30 100644 --- a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx +++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx @@ -1,12 +1,11 @@ import React from "react"; import s from './CheckoutSuccess.module.scss'; -import Image from "next/image"; import Link from "next/link"; import checkIcon from './assets/checkIcon.png'; -import { ButtonCommon } from "src/components/common"; +import { ButtonCommon, StaticImage } from "src/components/common"; import { IconArrowRight } from "src/components/icons"; const CheckoutSuccess = () => { @@ -14,9 +13,7 @@ const CheckoutSuccess = () => {
-
- check icon -
+
Your purchase has been successed!
Last call! Shop deep deals on 100+ bulk picks while you can.
From fa0fa859cbde013742225cd41d466c2ad4c24577 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 14:45:23 +0700 Subject: [PATCH 16/17] update --- pages/test.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/pages/test.tsx b/pages/test.tsx index dd5b91a2b..95ea43aff 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -2,12 +2,18 @@ import { useState } from 'react' import { ButtonCommon, Layout } from 'src/components/common' import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess' +import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon' +import SkeletonParagraph from 'src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph' +import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage' export default function Test() { - return ( <> + + + + ) } From 1518629590211d71cb7a5be8cd454b451b2b4201 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 16:59:16 +0700 Subject: [PATCH 17/17] :sparkles: feat: Loading Common --- .../LoadingCommon/LoadingCommon.module.scss | 6 +++++- .../common/LoadingCommon/LoadingCommon.tsx | 3 +-- .../common/LoadingCommon/assets/broccoli.png | Bin 2458 -> 0 bytes 3 files changed, 6 insertions(+), 3 deletions(-) delete mode 100644 src/components/common/LoadingCommon/assets/broccoli.png diff --git a/src/components/common/LoadingCommon/LoadingCommon.module.scss b/src/components/common/LoadingCommon/LoadingCommon.module.scss index 97ba57dd0..f17d4aa9c 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.module.scss +++ b/src/components/common/LoadingCommon/LoadingCommon.module.scss @@ -7,11 +7,15 @@ @apply bg-white; height: 7rem; width: 7rem; - border-radius: 50%; animation: spin 2s linear infinite; margin: auto; background: url('./assets/carrot.png') top 50% left 50% no-repeat; } + + .text { + @apply font-bold; + color: var(--primary); + } } @keyframes spin { diff --git a/src/components/common/LoadingCommon/LoadingCommon.tsx b/src/components/common/LoadingCommon/LoadingCommon.tsx index d41ea8492..1e8ffe340 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.tsx +++ b/src/components/common/LoadingCommon/LoadingCommon.tsx @@ -6,9 +6,8 @@ const LoadingCommon = () => { return (
-
-

Loading...

+

Loading...

) } diff --git a/src/components/common/LoadingCommon/assets/broccoli.png b/src/components/common/LoadingCommon/assets/broccoli.png deleted file mode 100644 index 9080e23362d4408ad522ea8660adc31684f2dff8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2458 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