1 files changed, 92 insertions, 34 deletions

diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index 00931284..9b3f5509 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -1,43 +1,101 @@
-import PageContent from "~/modules/page-content"
-import Form from "./components/Form"
-import Link from "next/link"
-import Image from "next/image"
-import IndoteknikLogo from "~/images/logo.png"
-import AccountActivation from "../account-activation"
+import PageContent from "~/modules/page-content";
+import Form from "./components/Form";
+import RegistrasiIndividu from "./components/RegistrasiIndividu";
+import RegistrasiBisnis from "./components/RegistrasiBisnis";
+import FormBisnis from "./components/FormBisnis";
+import Link from "next/link";
+import Image from "next/image";
+import IndoteknikLogo from "~/images/logo.png";
+import AccountActivation from "../account-activation";
+import { useState } from "react";
 
 const LOGO_WIDTH = 150;
 const LOGO_HEIGHT = LOGO_WIDTH / 3;
 
 const Register = () => {
+  const [isIndividuClicked, setIsIndividuClicked] = useState(true);
+  const [isBisnisClicked, setIsBisnisClicked] = useState(false);
+
+  const handleIndividuClick = () => {
+    setIsIndividuClicked(true);
+    setIsBisnisClicked(false);
+  };
+
+  const handleBisnisClick = () => {
+    setIsIndividuClicked(false);
+    setIsBisnisClicked(true);
+  };
+
   return (
     <div className="container">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-10 px-2 md:pt-16">
-        <section>
-          <Link href='/' className="block md:hidden">
-            <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={LOGO_WIDTH} height={LOGO_HEIGHT} className="mx-auto mb-4 w-auto h-auto" priority />
-          </Link>
-
-          <h1 className="text-2xl font-semibold text-center md:text-left">
-            Daftar Akun Indoteknik
-          </h1>
-          <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left">
-            Buat akun sekarang lebih mudah dan terverifikasi
-          </h2>
-
-          <Form />
-
-          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
-            Sudah punya akun Indoteknik?{' '}
-            <Link href='/login' className='inline font-medium text-danger-500'>
-              Masuk
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 pt-10 px-2 md:pt-16">
+        <section className="border">
+          <div className="px-8 py-4">
+            <Link href="/" className="block md:hidden">
+              <Image
+                src={IndoteknikLogo}
+                alt="Logo Indoteknik"
+                width={LOGO_WIDTH}
+                height={LOGO_HEIGHT}
+                className="mx-auto mb-4 w-auto h-auto"
+                priority
+              />
             </Link>
-          </div>
 
-          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
-            Akun anda belum aktif?{' '}
-            <Link href='/register?activation=email' className='inline font-medium text-danger-500'>
-              Aktivasi
-            </Link>
+            <h1 className="text-2xl font-semibold text-center md:text-left">
+              Daftar Akun Indoteknik
+            </h1>
+            <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left">
+              Buat akun sekarang lebih mudah dan terverifikasi
+            </h2>
+
+            <label htmlFor="name" className="text-black font-bold">
+              Tipe Akun
+            </label>
+            <div className="grid grid-cols-2 gap-x-3 h-10 font-bold text-black hover:cursor-pointer">
+              <div
+                className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
+                  isIndividuClicked ? "bg-red-500 text-white" : ""
+                }`}
+                onClick={handleIndividuClick}
+              >
+                <p>Individu</p>
+              </div>
+              <div
+                className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
+                  isBisnisClicked ? "bg-red-500 text-white" : ""
+                }`}
+                onClick={handleBisnisClick}
+              >
+                <p>Bisnis</p>
+              </div>
+            </div>
+            <div className="transition-opacity duration-300 ease-in-out">
+              {isIndividuClicked && (
+                <div className="opacity-100">
+                  <RegistrasiIndividu />
+                </div>
+              )}
+              {isBisnisClicked && (
+                <div className="opacity-100">
+                  <RegistrasiBisnis />
+                </div>
+              )}
+            </div>
+            <section className="flex justify-center items-center flex-col">
+              <div className="text-gray_r-11 mt-4 text-center md:text-left">
+                Sudah punya akun Indoteknik?{" "}
+                <Link href="/login" className="inline font-medium text-danger-500">
+                  Masuk
+                </Link>
+              </div>
+              <div className="text-gray_r-11 mt-4 text-center md:text-left">
+                Akun anda belum aktif?{" "}
+                <Link href="/register?activation=email" className="inline font-medium text-danger-500">
+                  Aktivasi
+                </Link>
+              </div>
+            </section>
           </div>
         </section>
 
@@ -48,7 +106,7 @@ const Register = () => {
 
       <AccountActivation />
     </div>
-  )
-}
+  );
+};
 
-export default Register
\ No newline at end of file
+export default Register;