diff options
Diffstat (limited to 'src-migrate/modules/register/index.tsx')
| -rw-r--r-- | src-migrate/modules/register/index.tsx | 54 |
1 files changed, 28 insertions, 26 deletions
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 3d6158c8..347f5c80 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -1,20 +1,24 @@ -import PageContent from '~/modules/page-content'; -import RegistrasiIndividu from './components/RegistrasiIndividu'; -import RegistrasiBisnis from './components/RegistrasiBisnis'; +import dynamic from 'next/dynamic'; import Link from 'next/link'; import Image from 'next/image'; -import IndoteknikLogo from '~/images/logo.png'; -import AccountActivation from '../account-activation'; import { useMemo, useState } from 'react'; -import { useRegisterStore } from './stores/useRegisterStore'; -import FormCaptcha from './components/FormCaptcha'; -import TermCondition from './components/TermCondition'; +import { useRouter } from 'next/router'; import { Button } from '@chakra-ui/react'; -import { useMutation } from 'react-query'; import { UseToastOptions, useToast } from '@chakra-ui/react'; -import { RegisterProps } from '~/types/auth'; +import { useMutation } from 'react-query'; +import { useRegisterStore } from './stores/useRegisterStore'; import { registerUser } from '~/services/auth'; -import { useRouter } from 'next/router'; +import IndoteknikLogo from '~/images/logo.png'; +import { RegisterProps } from '~/types/auth'; + +const PageContent = dynamic(() => import('~/modules/page-content')); +const RegistrasiIndividu = dynamic( + () => import('./components/RegistrasiIndividu') +); +const RegistrasiBisnis = dynamic(() => import('./components/RegistrasiBisnis')); +const FormCaptcha = dynamic(() => import('./components/FormCaptcha')); +const TermCondition = dynamic(() => import('./components/TermCondition')); +const AccountActivation = dynamic(() => import('../account-activation')); const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; @@ -47,6 +51,7 @@ const Register = () => { setIsIndividuClicked(false); setIsBisnisClicked(true); }; + const handleSubmit = async () => { if (!isFormValid) { setNotValid(true); @@ -98,10 +103,11 @@ const Register = () => { break; } }; + return ( <div className='container'> <div className='grid grid-cols-1 md:grid-cols-2 gap-x-8 pt-10 px-2 md:pt-16'> - <section className=''> + <section> <div className='px-8 py-4 border'> <Link href='/' className='block md:hidden'> <Image @@ -126,7 +132,7 @@ const Register = () => { </label> <div className='grid grid-cols-2 gap-x-3 mt-2 h-14 font-bold text-black hover:cursor-pointer'> <div - className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${ + className={`border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${ isIndividuClicked ? 'bg-red-500 text-white' : '' }`} onClick={handleIndividuClick} @@ -134,7 +140,7 @@ const Register = () => { <p>Individu</p> </div> <div - className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${ + className={`border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${ isBisnisClicked ? 'bg-red-500 text-white' : '' }`} onClick={handleBisnisClick} @@ -144,20 +150,16 @@ const Register = () => { </div> <div className='transition-opacity duration-300 ease-in-out'> {isIndividuClicked && ( - <div className='opacity-100'> - <RegistrasiIndividu - chekValid={notValid} - buttonSubmitClick={buttonSubmitClick} - /> - </div> + <RegistrasiIndividu + chekValid={notValid} + buttonSubmitClick={buttonSubmitClick} + /> )} {isBisnisClicked && ( - <div className='opacity-100'> - <RegistrasiBisnis - chekValid={notValid} - buttonSubmitClick={buttonSubmitClick} - /> - </div> + <RegistrasiBisnis + chekValid={notValid} + buttonSubmitClick={buttonSubmitClick} + /> )} </div> <section className='mt-2'> |