🎨 styles: form authen

:%s

src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss

@@ -0,0 +1,4 @@
+.formAuthenticate {
+    @apply grid grid-cols-2 overflow-hidden;
+    width: 200%;
+}

src/components/common/ModalAuthenticate/ModalAuthenticate.tsx

@@ -1,11 +1,19 @@
-import React from 'react'
+import React, { useState } from 'react'
 import FormLogin from './components/FormLogin/FormLogin'
+import FormRegister from './components/FormRegister/FormRegister'
 import s from './ModalAuthenticate.module.scss'
 
 const ModalAuthenticate = () => {
-    return(
+    const [isLogin, setIsLogin] = useState<boolean>(true)
-        <section >
+
-           <FormLogin/>
+    const onSwitch = () => {
+        setIsLogin(!isLogin)
+    }
+
+    return (
+        <section className={s.formAuthenticate}>
+            <FormLogin isHide={!isLogin} onSwitch={onSwitch} />
+            <FormRegister isHide={isLogin} onSwitch={onSwitch} />
         </section>
     )
 }

src/components/common/ModalAuthenticate/components/FormAuthen.module.scss

@@ -0,0 +1,35 @@
+.formAuthen {
+    @apply transition-all duration-200 bg-white w-full;
+    .inner {
+        @screen md {
+            max-width: 52rem;
+            margin: auto;
+        }
+        .body {
+            > div {
+                &:not(:last-child) {
+                    margin-bottom: 1.6rem;
+                }
+            }
+        }
+        .others {
+            @apply font-bold text-center;
+            margin-top: 4rem;
+
+            span {
+                @apply text-active;
+                margin-right: 0.8rem;
+            }
+            button {
+                all: unset;
+                @apply text-primary cursor-pointer;
+                &:focus-visible {
+                    outline: 2px solid #000;
+                }
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+    }
+}

src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss

@@ -1,38 +1,13 @@
-.login {
+.hide {
-    margin: auto;
+    transform: translateX(-200%);
-    @screen md {
+}
-        max-width: 52rem;
+
-    }
+.bottom {
-    .inner {
-        max-width: 100%;
-        overflow: hidden;
-        .body {
-            > div {
-                &:not(:last-child) {
-                    margin-bottom: 1.6rem;
-                }
-            }
-        }
-        .bottom {
     @apply flex justify-between items-center;
     margin: 4rem auto;
     .forgotPassword {
         @apply font-bold;
         color: var(--primary);
     }
-        }
-        .others {
-            @apply font-bold text-center;
-            margin-top: 4rem;
-
-            span {
-                @apply text-active;
-                margin-right: 0.8rem;
-            }
-            button {
-                all: unset;
-                @apply text-primary;
-            }
-        }
-    }
 }
+

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

@@ -3,23 +3,29 @@ import React from 'react'
 import { Inputcommon, ButtonCommon } from 'src/components/common'
 import { ROUTE } from 'src/utils/constanst.utils'
 import SocialAuthen from '../SocialAuthen/SocialAuthen'
-import s from './FormLogin.module.scss'
+import s from '../FormAuthen.module.scss'
+import styles from './FormLogin.module.scss'
+import classNames from 'classnames'
 
 interface Props {
+    isHide: boolean,
     onSwitch: () => void
 }
 
-const FormLogin = ({ onSwitch }: Props) => {
+const FormLogin = ({ onSwitch, isHide }: Props) => {
     return (
-        <section className={s.login}>
+        <section className={classNames({
+            [s.formAuthen]: true,
+            [styles.hide]: isHide
+        })}>
             <div className={s.inner}>
                 <div className={s.body}>
                     <Inputcommon placeholder='Email Address' type='email' />
                     <Inputcommon placeholder='Password' type='password' />
                 </div>
-                <div className={s.bottom}>
+                <div className={styles.bottom}>
                     <Link href={ROUTE.FORGOT_PASSWORD}>
-                        <a href="" className={s.forgotPassword}>
+                        <a href="" className={styles.forgotPassword}>
                             Forgot Password?
                         </a>
                     </Link>

src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss

@@ -0,0 +1,21 @@
+@import '../../../../../styles/utilities';
+
+.formRegister {
+    transform: translateX(-100%);
+    &.hide {
+        transform: none;
+    }
+    .passwordNote {
+        @apply text-center caption;
+        margin-top: 0.8rem;
+    }
+    
+    .bottom {
+        @apply flex justify-between items-center w-full;
+        margin: 4rem auto;
+        button {
+            @apply w-full;
+        }
+    }
+}
+

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import { ButtonCommon, Inputcommon } from 'src/components/common'
+import s from '../FormAuthen.module.scss'
+import styles from './FormRegister.module.scss'
+import SocialAuthen from '../SocialAuthen/SocialAuthen'
+import classNames from 'classnames'
+
+interface Props {
+    isHide: boolean,
+    onSwitch: () => void
+}
+
+const FormRegister = ({ onSwitch, isHide }: Props) => {
+    return (
+        <section className={classNames({
+            [s.formAuthen]: true,
+            [styles.formRegister]: true,
+            [styles.hide]: isHide
+        })}>
+            <div className={s.inner}>
+                <div className={s.body}>
+                    <Inputcommon placeholder='Email Address' type='email' />
+                    <Inputcommon placeholder='Password' type='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>
+                </div>
+                <div className={styles.bottom}>
+                    <ButtonCommon size='large'>Create Account</ButtonCommon>
+                </div>
+                <SocialAuthen />
+                <div className={s.others}>
+                    <span>Already an account?</span>
+                    <button onClick={onSwitch}>Sign In</button>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default FormRegister

src/styles/_base.scss

@@ -34,7 +34,7 @@
   --border-line: #ebebeb;
   --background: #fff;
   --gray: #f8f8f8;
-  --white: #fbfbfb;
+  --white: #fff;
   --background-arrow:rgba(20, 20, 20, 0.05);
   --font-size: 1.6rem;
   --line-height: 2.4rem;