From 10cd02d6fcc39c75b8db19a874cc0ba49b890376 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 9 Dec 2024 15:48:36 +0700
Subject: <iman> add dynamic to call component

---
 src-migrate/modules/register/index.tsx | 54 ++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 26 deletions(-)

(limited to 'src-migrate/modules/register/index.tsx')

diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index da41fd8b..0308e397 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'>
-- 
cgit v1.2.3