feat: create AuthLayout component and refactor modal usage in forms

2025-02-22 17:14:33 +08:00
parent 0d6f2e300f
commit d9c36c5ff0
11 changed files with 80 additions and 131 deletions
@@ -0,0 +1,110 @@
+import { useState } from 'react'
+
+import { Button } from '~/components/ui/button'
+
+export const FormRegister = () => {
+  const [showPassword, setShowPassword] = useState(false)
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="w-full max-w-md">
+        <form>
+          {/* Input Email / No Telepon */}
+          <div className="mb-4">
+            <label
+              htmlFor="email"
+              className="mb-1 block text-gray-700"
+            >
+              Email/No. Telepon
+            </label>
+            <input
+              type="text"
+              placeholder="Contoh: legal@legalgo.id"
+              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              required
+            />
+          </div>
+
+          {/* Input Password */}
+          <div className="relative mb-4">
+            <label
+              htmlFor="password"
+              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
+            >
+              Kata Sandi
+            </label>
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Masukkan Kata Sandi"
+              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              required
+            />
+            <button
+              type="button"
+              className="absolute top-9 right-3 text-gray-500"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+            </button>
+          </div>
+
+          {/* Reinput Password */}
+          <div className="relative mb-4">
+            <label
+              htmlFor="password"
+              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
+            >
+              Ulangi Kata Sandi
+            </label>
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Masukkan Kata Sandi"
+              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              required
+            />
+            <button
+              type="button"
+              className="absolute top-9 right-3 text-gray-500"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+            </button>
+          </div>
+
+          {/* No Telepon */}
+          <div className="mb-4">
+            <label
+              htmlFor="no-telpon"
+              className="mb-1 block text-gray-700"
+            >
+              No. Telepon
+            </label>
+            <input
+              type="text"
+              placeholder="Contoh: legal@legalgo.id"
+              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              required
+            />
+          </div>
+
+          {/* Subscribe*/}
+          <div className="mb-4">
+            <label
+              htmlFor="subscription"
+              className="mb-1 block text-gray-700"
+            >
+              Subscription
+            </label>
+            <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
+              <option selected>Subscription</option>
+            </select>
+          </div>
+
+          {/* Tombol Masuk */}
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Daftar
+          </Button>
+        </form>
+      </div>
+    </div>
+  )
+}