1 files changed, 114 insertions, 0 deletions
diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
new file mode 100644
index 00000000..71cc29d8
--- /dev/null
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -0,0 +1,114 @@
+import DesktopView from '@/core/components/views/DesktopView'
+import useRegister from '../hooks/useRegister'
+import Link from '@/core/components/elements/Link/Link'
+import Alert from '@/core/components/elements/Alert/Alert'
+import PageContent from '@/lib/content/components/PageContent'
+
+const RegisterDesktop = () => {
+  const {
+    handleChangeInput,
+    handleSubmit,
+    isLoading,
+    isValid,
+    alert,
+    companyNameRef,
+    fullnameRef,
+    emailRef,
+    passwordRef
+  } = useRegister()
+
+  return (
+    <DesktopView>
+      <div className='container mx-auto'>
+        <div className='grid grid-cols-2 gap-x-10 pt-16'>
+          <div>
+            <h1 className='text-2xl font-semibold'>Daftar Akun Indoteknik</h1>
+            <h2 className='text-gray_r-11 font-normal mt-1 mb-4'>
+              Buat akun sekarang lebih mudah dan terverifikasi
+            </h2>
+
+            {alert && (
+              <Alert className='text-center' type={alert.type}>
+                {alert.children}
+              </Alert>
+            )}
+
+            <form className='w-full mt-6 flex flex-col gap-y-4' onSubmit={handleSubmit}>
+              <div>
+                <label htmlFor='companyName'>
+                  Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
+                </label>
+                <input
+                  type='text'
+                  id='companyName'
+                  name='companyName'
+                  className='form-input w-full mt-3'
+                  ref={companyNameRef}
+                  onChange={handleChangeInput}
+                  placeholder='cth: INDOTEKNIK DOTCOM GEMILANG'
+                  autoCapitalize='true'
+                />
+              </div>
+
+              <div>
+                <label htmlFor='fullname'>Nama Lengkap</label>
+                <input
+                  type='text'
+                  id='fullname'
+                  name='fullname'
+                  className='form-input w-full mt-3'
+                  ref={fullnameRef}
+                  onChange={handleChangeInput}
+                  placeholder='John Doe'
+                />
+              </div>
+              <div>
+                <label htmlFor='email'>Alamat Email</label>
+                <input
+                  type='email'
+                  name='email'
+                  id='email'
+                  className='form-input w-full mt-3'
+                  ref={emailRef}
+                  onChange={handleChangeInput}
+                  placeholder='contoh@email.com'
+                />
+              </div>
+              <div>
+                <label htmlFor='password'>Kata Sandi</label>
+                <input
+                  type='password'
+                  name='password'
+                  id='password'
+                  className='form-input w-full mt-3'
+                  ref={passwordRef}
+                  onChange={handleChangeInput}
+                  placeholder='••••••••••••'
+                />
+              </div>
+              <button
+                type='submit'
+                className='btn-yellow w-full mt-2'
+                disabled={!isValid || isLoading}
+              >
+                {!isLoading ? 'Masuk' : 'Loading...'}
+              </button>
+            </form>
+
+            <div className='text-gray_r-11 mt-10'>
+              Sudah punya akun Indoteknik?{' '}
+              <Link href='/login' className='inline'>
+                Masuk
+              </Link>
+            </div>
+          </div>
+          <div>
+            <PageContent path='/register' />
+          </div>
+        </div>
+      </div>
+    </DesktopView>
+  )
+}
+
+export default RegisterDesktop