From 72cb99f1cae8aefb527be9c18848120c9b80611e Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 16:48:27 +0700 Subject: [PATCH] :art: restyle: Home Feature --- .../home/HomeFeature/HomeFeature.module.scss | 13 +---- .../modules/home/HomeFeature/HomeFeature.tsx | 41 ++++++++------ .../HomeFeature/assets/10h30-11h-mobile.png | Bin 2341 -> 0 bytes .../{10h30-11h-desktop.png => 10h30-11h.png} | Bin .../home/HomeFeature/assets/8h-mobile.png | Bin 2456 -> 0 bytes .../assets/{8h-desktop.png => 8h.png} | Bin .../assets/{green-desktop.png => green.png} | Bin .../HomeFeatureCarousel.tsx | 48 +++++++++++++++++ .../HomeFeatureItem.module.scss | 50 +++--------------- .../HomeFeatureItem/HomeFeatureItem.tsx | 16 +++--- 10 files changed, 88 insertions(+), 80 deletions(-) delete mode 100644 src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png rename src/components/modules/home/HomeFeature/assets/{10h30-11h-desktop.png => 10h30-11h.png} (100%) delete mode 100644 src/components/modules/home/HomeFeature/assets/8h-mobile.png rename src/components/modules/home/HomeFeature/assets/{8h-desktop.png => 8h.png} (100%) rename src/components/modules/home/HomeFeature/assets/{green-desktop.png => green.png} (100%) create mode 100644 src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss index 1753edf99..3275bfb3b 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss +++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss @@ -1,16 +1,5 @@ @import "../../../../styles/utilities"; .homeFeature { - @apply spacing-horizontal; - background-color: #ffffff; - height: fit-content; - margin: 3.2rem auto; - @screen md { - @apply grid grid-cols-3; - grid-gap: 2.4rem; - margin: 6.4rem auto; - } - @screen md { - grid-gap: 4rem; - } + @apply spacing-horizontal-left bg-white; } diff --git a/src/components/modules/home/HomeFeature/HomeFeature.tsx b/src/components/modules/home/HomeFeature/HomeFeature.tsx index af6ec7287..d8851aa30 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.tsx +++ b/src/components/modules/home/HomeFeature/HomeFeature.tsx @@ -1,25 +1,34 @@ import React from 'react' import s from './HomeFeature.module.scss' -import HomeFeatureItem from './components/HomeFeatureItem/HomeFeatureItem' +import FirstPic from './assets/10h30-11h.png' +import SecondPic from './assets/8h.png' +import ThirdPic from './assets/green.png' -const HomeFeature = () => { +import HomeFeatureCarousel from './components/HomeFeatureCarousel/HomeFeatureCarousel' + +const CAROUSEL_DATA = [ + { + image: FirstPic, + children: Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm., + }, + { + image: SecondPic, + children: Most fresh fish and seafood will be listed at 8am from inventory., + }, + { + image: ThirdPic, + children: Show that food will be shipped in a greengrocery plastic bag., + }, +] + +const HomeFeature = () => { return ( -
- - Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm. - - - - Most fresh fish and seafood will be listed at 8am from inventory. - - - - Show that food will be shipped in a greengrocery plastic bag. - -
+
+ +
) } -export default HomeFeature +export default HomeFeature \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png b/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png deleted file mode 100644 index 871e0e15b17c918a00970be758bf94e1c682243a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2341 zcmV+=3EK9FP)-w@p)@BvoOcCSq!|s5q!#Qj>z6@GvnoGN?_|R0q{MlcuARb|iKtohghokQAGU z)!GzsQ01E1L~tVDs~RBzn((lxymUg>x9?epa}VbrkA0zka&s@-dmd}Awf^<5wa=n) zfthDCKW;It&)dz&>rs=Joofo;&oj&3S!&XOMd>tfn#ybEtYM4fPSn`S zvT`@x98UxKUJi~QtoeHUi}T-(_x(GV^4;**sD1Ao=pH|Jvp)H`Klz#CYVZ7PkFEZ_ ze%uA#GHF2T^EUgA2Q=>#%N8%O@0Gutv)&|xpAYod&$WMCHKp4M?e`sjKQ%7!ws8nZ zrBd>)Q*JowJ4mFlEn$rr76t_vtP9dVG-x_{lZIujSY=$mse!e3u2|!;R;)B7+Y8Lr zH5={!AslkDB)7m^7gi#_ID9o z`oyVmz?lcBXUH$0;dMv~cG(9d)@!gS;aYp=YUJ_!=0Wc>G4MU(63z^SEEMDxp1@mu zl2@ubI|sY1H^W#iA^?KH^A&r)G%n%Hz>!zU+@kj3%~QXgwSPxRwJ>tTYY)YH97hRp z#h}1h4rY1z2XjIg7&aZ_K<8kO*`HTrKNG@Hb#%6HW}vP*9)K-#0=b02yrMuTQ&M=9 ziIIeIMMKr3j$^iPDz+Q$HKo)wfMMmuN33Vb&C8N!DyZoNkBjhD`4&D0HFK_{6tpYk(ltdLRMnGs+-m>c@8x@nl6ur?O1FPxKl=u@cugnnR^3R! zWhKZDpa~7)lDgS;=@WvQyb9)owofRZWs8?e_mJyGrR!_X6lSDJ>XC znV$;^Bo4k3cSNyH7NPOAxRbVY#2@q)Hw@a zsus+_*`l$%*}jwKL8%7{z3Bkn)bi5RAI-dJnTxuB5>aD&B6h*><{r;$adT8B9;~`? z-iA|o(a{udg1LAU+9yvrN1U?J`D)x8)rkk~7TBhIdqXaP;83GS$refSgm^GDAgWx8)K}rn0V8YvF0(dq41l31*2LV8R1u$rw zwDb*B&meUG22p&Mdn?Cw7UA&FlS_;xqNdMzQux&)ORW@}804~0KYaF$`At@SRFo6n zv+}{4Q^k^%@veyjHTaBIBTKw-M;v?ubuW&U-6Nd@`Y=3%ReGKZQ(X+$4bBLU0rg0@ zi_wi6V^TL(De7_OQuqc=NTFx;1ca4N%F+#VF!`t*L5|JOi7;<$YqsgZ_=6nBI2Hg| z$nTO15>0TShIiBoY?ouZ`9f4T4EA zb|u6xii^y5!>r>*u6tStQFGXtRBQ3J$=Dm5Z{q-*f#=B2jzIo8k!pmeCcbw6`b0%R zh_ixk#%$;TODs*D;C^? z2zXs=H)x;WR`8~;&*}5W?-f_%E%1m z)>Jn`FUeyk`V=CtJ)g`)5fRL15|3K!Zve_g2f}f1Cbo}X_|AqGgQB>iJ6+hPqrAO^ z@Jtk_@nOxY6TFkfN8Cy^P~z?8)W`;E|IqXvABh7-ar05e0lo_xhs3kfbqU$6>1dbi z;~$r*{KVgqrotVC;1g6T^At{>vLJLW$x6C<#$_hJbH}8!2ruk^*D%_;X8}Lr00000 LNkvXXu0mjfxE5{5 diff --git a/src/components/modules/home/HomeFeature/assets/10h30-11h-desktop.png b/src/components/modules/home/HomeFeature/assets/10h30-11h.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/10h30-11h-desktop.png rename to src/components/modules/home/HomeFeature/assets/10h30-11h.png diff --git a/src/components/modules/home/HomeFeature/assets/8h-mobile.png b/src/components/modules/home/HomeFeature/assets/8h-mobile.png deleted file mode 100644 index e734cf1e54e143da4adf7d5ae34291b9e5e1a7e5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2456 zcmV;J31{|+P)z7j=OFyNh;#Ej8WL z#=`=+HVcm>?6!&mzVcwFNZY?B&Y< zkt7nbiadZI4^TJQ=C7PH>x3a|q!a-mq@T}IB;_^BqA_Sl>hvLZ7bCI)=r)x~Zu$NG zaGaKbClbDX;84>@%h8B)|4v_fNH^#RD>FpJJDFmA`_s2$e1tF%(@gA$G>4~XiCC2I z(Cmt&0U_IzAVS2|11W=cBNAmXvS?IVVoD_KwsvJ8Soi0 zL>g78nWXglg8P;frxcCaw~v|)HFC+OA&yP^lHq6(4K|!;znUHZn@#RO zL|js;i-cAsFe4>q(T$=G+jye=h?KH3E$Ns@Qdg3aam^yXX6S)wUuw(|y8d`uQ230! zrjhK*H3iF(*EAu5lB{Ez)B;klsbwHpv)Um1*j0x2qpX-~tf07+OvNpYrqHi2&C_^C zl86=*9>VYxb=qyw!Qqzfa88w&`$jX2IyR#wzU<0vO9=XkbA7V4yR*LUP+aJO2Ot72 zf#V`2nk_C9It^M`amrBXXi?(ZJ+RV1S5Q(CE5KCv7{ zfXxbOUSM=Qm5HRt8vV*SBPdPzAv$atY|9chpWSmEe>Vcd-p_s$E9|h+8f69u={lXRKhYi@+1H)1Ww!qM*B# znio3EPx3TdL;1RaG8+32zr{|>5m+?oy3tfW&=D0g)@kFMXh+9*#6x951 z>(MaRLWh1uVQD}!OntqUE^2Vk4isq^XqPGuSOdbF9 z3SADebDq`_ogE5g@^IQJ%JcODOn+ot<;xhf?G9G-G{Gi_nJg&0TCdDdK$uGSDVa#_ za5$Ep5iAfMW}zF#V4+A?wR!_JZhMn9uYZxsiCh1jr2Y$kpb0)ZSYY$IZYujyp`WmZ z5pnyPXx++H^vgH)mtAmRT`WY~xw&OIzuK>mMx?-m)}5dpJA27IOr5V}-9m zb^5C_eKhlEE>n(9Zr%G2wQPTzesSt3-FIJ<|_+n9-)~dUN398uD-wHw9l7lR)IwzP}%PB{*`k|@U4NDX;*cvDhr<* zqKlu6(>K_hAP~$8eu0i42<-IY&2gR`yZ(6mx~k`HV_?j-XSCx8esJer)y9>H>pYtu z(OI5R%#edDn|~bfc#$MzU4m&58x9W1yPZ0BAKX*tUDdBE+sCnS&3aY#mq~k?Q3g}8 z&o8SonAp2#eyfg|N4B}a`JFa4Z+Njt8`Y}JF|oYD1BiH7-KiVqa}^*KNsnv4Y-?qF z;s#IiKj=#Q25aqx{p|VGszJ(L`z{N4mj{`UtqIi!g)o);*%wn4}yYzQdBHYJ6>!zKm6fhwl9N_KF}089o`?zUGi z;A!f^2_UdhI2&;C@~EP=PbdGT4i6F2O4UHb<+XjrVJn}rsp?^x;{nH!W*^Nic;8KJ z7yml04hIkC=UmtJyUy&)xZ8hlpB6&+jZ%WEi0g7#m;)RU8U=Ns6E{6VI8Yl{1(;y| z2R5#Kfx;Yw02O@xe4frSC4$@0hBIrgaUeX)Gll!yHfq^t9JYf@dNJXHyK4uz(s!JD z(AFLnU?wq3AOGt!6>R=D`#=S+pMQU!Vie5G$N#>mp5aKOlCd zqSV(`|N~Kd7;vZQe;vwMv2;4D@){Nn1Lc1 zX`DyY0#r^|BL1)<8Fg>+pEyXR)6$WA&(t1w-e_WPs-Y!-wK`#0$;e_;-=0NSBxGem zhHd^@TH2qNAiR?^jxbq-hxc_KELGnV;X$jsg-NFbWkja53$z3X%?j}d_F^^51E5j^ z@I-hgv7{2Rtvz8{IwG9l4Xca=4}e*(t5{ZU*}^Mka+VLADB=WEFL{JV@E_i&6?$HB zVO9!ANz>;9k>`Vk8=g5VYdHz{ysWs^^*TNIj!d@&GLO_Qllma5ExW~fr_oCey*_%bv, 'Component' | "option"> { + option?: TOptionsEvents +} + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 1.2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 1.8, + }, + '(min-width: 768px)': { + slidesPerView: 2.1, + }, + '(min-width: 1008px)': { + slidesPerView: 2.3, + }, + '(min-width: 1280px)': { + slidesPerView: 2.8, + }, + '(min-width: 1440px)': { + slidesPerView: 3, + }, + }, + } + +const HomeFeatureCarousel = ({option, data, ...props} : HomeFeatureCarouselProps) => { + return ( +
+ + data={data} + Component={HomeFeatureItem} + {...props} + option={{ ...OPTION_DEFAULT, ...option }} + /> +
+ ) + +} + +export default HomeFeatureCarousel \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss index d3dcb518b..c0b8d49ba 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss @@ -1,56 +1,18 @@ @import "../../../../../../styles/utilities"; .homeFeatureItem { - @apply flex items-center; - width: fit-content; - margin: auto; - - @screen md { - @apply flex flex-col items-center justify-between; - } - - @screen lg { - @apply flex flex-row; - } + @apply flex items-center justify-center; + margin-right: 0.8rem; + height: 100%; .itemImg { - @apply flex float-left clear-both; margin-right: 2.4rem; - align-items: center; - &.firstImg { - margin-top: 1rem; - content: url("../../assets/10h30-11h-desktop.png"); - } - &.secondImg { - margin-top: 1rem; - content: url("../../assets/8h-desktop.png"); - } - &.thirdImg { - margin-top: 1rem; - content: url("../../assets/green-desktop.png"); - } - - @screen md { - @apply flex flex-col justify-center items-center; - margin: auto; - margin-top: 0.8rem; - } - - @screen lg { - @apply flex float-left clear-both; - margin-right: 2.4rem; - margin-top: 0; - } + max-width: 12rem; + min-width: 8rem; } .itemText { max-width: 28rem; - min-width: 12rem; - @screen md { - @apply text-center; - } - @screen lg { - @apply text-left; - } + min-width: none; } } diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx index eb566bdc9..3cc2db47f 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx @@ -1,21 +1,21 @@ import React from 'react' -import classNames from 'classnames' import s from './HomeFeatureItem.module.scss' +import { StaticImage } from 'src/components/common' -interface HomeFeatureItemProps { - image: string; - children: any; +export interface HomeFeatureItemProps { + image: StaticImageData; + children: React.ReactNode; } const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { return (
- home feature item img +
+ +
+
{children}
)