Merge pull request #18 from KieIO/m3-lytran

M3: Modal login, register, user info, banner carousel

pages/index.tsx

@@ -5,7 +5,7 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
 export default function Home() {
   return (
     <>
-      <HomeBanner />
+      <HomeBanner/>
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />

src/components/common/Banner/Banner.module.scss

@@ -1,52 +0,0 @@
-@import "../../../styles/utilities";
-
-.banner {
-  @apply bg-primary-light custom-border-radius-lg overflow-hidden;
-  @screen md {
-    border: 1px solid var(--primary);
-  }
-  &.large {
-    margin-bottom: 2.8rem;
-    .inner {
-      @screen xl {
-        @apply bg-right-bottom;
-        background-size: unset;
-      }
-    }
-  }
-  .inner {
-    @apply bg-no-repeat;
-    background-size: 90%;
-    background-position: right -500% bottom 0%;
-    .content {
-      background-image: linear-gradient(
-        to right,
-        rgb(227, 242, 233, 0.9),
-        rgb(227, 242, 233, 0.5) 80%,
-        rgb(227, 242, 233, 0)
-      );
-      padding: 1.6rem;
-      max-width: 37rem;
-      @screen md {
-        max-width: 49.6rem;
-        padding: 4.8rem;
-      }
-      .top {
-        .heading {
-          @apply heading-1 font-heading;
-          margin-bottom: 1.6rem;
-        }
-        .subHeading {
-          @apply sub-headline;
-          @screen md {
-            @apply caption;
-          }
-        }
-      }
-
-      .bottom {
-        margin-top: 4rem;
-      }
-    }
-  }
-}

src/components/common/Banner/Banner.tsx

@@ -1,47 +1,24 @@
-import classNames from 'classnames'
-import Link from 'next/link'
 import React, { memo } from 'react'
-import { IconArrowRight } from 'src/components/icons'
+import CarouselCommon from '../CarouselCommon/CarouselCommon'
-import { ROUTE } from 'src/utils/constanst.utils'
+import BannerItem, { BannerItemProps } from './BannerItem/BannerItem'
-import { LANGUAGE } from 'src/utils/language.utils'
-import ButtonCommon from '../ButtonCommon/ButtonCommon'
-import s from './Banner.module.scss'
 
 interface Props {
-    imgLink: string,
+    data: BannerItemProps[],
-    title: string,
-    subtitle: string,
-    buttonLabel?: string,
-    linkButton?: string,
-    size?: 'small' | 'large',
 }
 
-const Banner = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME, size = 'large' }: Props) => {
+const option = {
+    slidesPerView: 1,
+    breakpoints: {}
+}
+const Banner = memo(({ data }: Props) => {
     return (
-        <div className={classNames({
+        <CarouselCommon<BannerItemProps>
-            [s.banner]: true,
+            data={data}
-            [s[size]]: true,
+            itemKey="banner"
-        })}>
+            Component={BannerItem}
-            <div className={s.inner} style={{ backgroundImage: `url(${imgLink})` }}>
+            option={option}
-                <div className={s.content}>
+            isDot = {true}
-                    <div className={s.top}>
+        />
-                        <h1 className={s.heading}>
-                            {title}
-                        </h1>
-                        <div className={s.subHeading}>
-                            {subtitle}
-                        </div>
-                    </div>
-                    <div className={s.bottom}>
-                        <Link href={linkButton}>
-                            <a>
-                                <ButtonCommon icon={<IconArrowRight />} isIconSuffix={true}>{buttonLabel}</ButtonCommon>
-                            </a>
-                        </Link>
-                    </div>
-                </div>
-            </div>
-        </div>
     )
 })
 

src/components/common/Banner/BannerItem/BannerItem.module.scss

@@ -0,0 +1,52 @@
+@import "../../../../styles/utilities";
+
+.bannerItem {
+  @apply bg-primary-light custom-border-radius-lg overflow-hidden;
+  @screen md {
+    border: 1px solid var(--primary);
+  }
+  &.large {
+    margin-bottom: 2.8rem;
+    .inner {
+      @screen xl {
+        @apply bg-right-bottom;
+        background-size: unset;
+      }
+    }
+  }
+  .inner {
+    @apply bg-no-repeat;
+    background-size: 90%;
+    background-position: right -500% bottom 0%;
+    .content {
+      background-image: linear-gradient(
+        to right,
+        rgb(227, 242, 233, 0.9),
+        rgb(227, 242, 233, 0.5) 80%,
+        rgb(227, 242, 233, 0)
+      );
+      padding: 1.6rem;
+      max-width: 37rem;
+      @screen md {
+        max-width: 49.6rem;
+        padding: 4.8rem;
+      }
+      .top {
+        .heading {
+          @apply heading-1 font-heading;
+          margin-bottom: 1.6rem;
+        }
+        .subHeading {
+          @apply sub-headline;
+          @screen md {
+            @apply caption;
+          }
+        }
+      }
+
+      .bottom {
+        margin-top: 4rem;
+      }
+    }
+  }
+}

src/components/common/Banner/BannerItem/BannerItem.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import Link from 'next/link'
+import React, { memo } from 'react'
+import { IconArrowRight } from 'src/components/icons'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { LANGUAGE } from 'src/utils/language.utils'
+import ButtonCommon from '../../ButtonCommon/ButtonCommon'
+import s from './BannerItem.module.scss'
+
+export interface BannerItemProps {
+    imgLink: string,
+    title: string,
+    subtitle: string,
+    buttonLabel?: string,
+    linkButton?: string,
+    size?: 'small' | 'large',
+}
+
+const BannerItem = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME, size = 'large' }: BannerItemProps) => {
+    return (
+        <div className={classNames({
+            [s.bannerItem]: true,
+            [s[size]]: true,
+        })}>
+            <div className={s.inner} style={{ backgroundImage: `url(${imgLink})` }}>
+                <div className={s.content}>
+                    <div className={s.top}>
+                        <h1 className={s.heading}>
+                            {title}
+                        </h1>
+                        <div className={s.subHeading}>
+                            {subtitle}
+                        </div>
+                    </div>
+                    <div className={s.bottom}>
+                        <Link href={linkButton}>
+                            <a>
+                                <ButtonCommon icon={<IconArrowRight />} isIconSuffix={true}>{buttonLabel}</ButtonCommon>
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+})
+
+export default BannerItem

src/components/common/Header/Header.tsx

@@ -13,7 +13,7 @@ import s from './Header.module.scss'
 
 const Header = memo(() => {
     const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
-    const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: true })
+    const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
     const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
 
     useEffect(() => {

src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx

@@ -26,8 +26,9 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
         <section className={s.formAuthen}>
             <div className={s.inner}>
                 <div className={s.body}>
-                    <Inputcommon placeholder='Email Address' type='email' ref={emailRef}
+                <Inputcommon placeholder='Email Address' type='email' ref={emailRef} />
-                        isShowIconSuccess={true} isIconSuffix={true} />
+                    {/* <Inputcommon placeholder='Email Address' type='email' ref={emailRef}
+                        isShowIconSuccess={true} isIconSuffix={true} /> */}
                     <InputPassword placeholder='Password'/>
                 </div>
                 <div className={styles.bottom}>

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

@@ -28,7 +28,7 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
             <div className={s.inner}>
                 <div className={s.body}>
                     <Inputcommon placeholder='Email Address' type='email' ref={emailRef}/>
-                    <Inputcommon placeholder='Password' type='password' />
+                    <InputPassword placeholder='Password'/>
                     <div className={styles.passwordNote}>
                         Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character.
                     </div>

src/components/modules/home/HomeBanner/HomeBanner.module.scss

@@ -5,6 +5,7 @@
   margin-bottom: 2.8rem;
   .left {
     @apply hidden;
+    margin-bottom: 3rem;
   }
   @screen xl {
     @apply grid;

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Banner } from 'src/components/common'
 import s from './HomeBanner.module.scss'
 import BannerImgRight from './assets/banner_full.png'
+import BannerImgRight2 from './assets/banner_product.png'
 
 interface Props {
     className?: string
@@ -13,14 +14,25 @@ const HomeBanner = ({ }: Props) => {
         <div className={s.homeBanner}>
             <section className={s.left}>
                 <div className={s.text}>
-                    Freshness<br/>guaranteed
+                    Freshness<br />guaranteed
                 </div>
             </section >
             <Banner
-                title="Save 15% on your first order"
+                data={
-                subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+                    [{
-                imgLink={BannerImgRight.src}
+                        title: "Save 15% on your first order",
-                size="small"
+                        subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
+                        imgLink: BannerImgRight.src,
+                        size: "small",
+                    },
+                    {
+                        title: "Save 15% on your first order 2",
+                        subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
+                        imgLink: BannerImgRight2.src,
+                        size: "small",
+                    }
+                ]
+                }
             />
         </div >
     )