refactor: move-submitButtonSection-to-formComponent

isd-sgcu · Dec 21, 2023 · fec544b · fec544b
1 parent 8665784
commit fec544b
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 94 deletions.
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,6 +1,4 @@
-import { Link } from "react-router-dom";
 import LoginForm from "../../components/Form/LoginForm";
-import SubmitButton from "../../components/Form/SubmitButton";
 import MainLayout from "../../layouts/MainLayout";
 
 // Page
@@ -16,18 +14,6 @@ const Login = () => {
  </p>
  </div>
  <LoginForm />
- <div className="flex flex-col items-center justify-center">
- <SubmitButton text="เข้าสู่ระบบ" />
- <div className="flex space-x-2 px-2.5 py-2">
- <span className="text-base-johnjud-gray">ยังไม่มีบัญชี?</span>
- <Link
- to="/register"
- className="text-base font-semibold text-black underline"
- >
- ลงทะเบียน
- </Link>
- </div>
- </div>
  </div>
  );
 };

diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
@@ -1,6 +1,4 @@
-import { Link } from "react-router-dom";
 import RegisterForm from "../../components/Form/RegisterForm";
-import SubmitButton from "../../components/Form/SubmitButton";
 import MainLayout from "../../layouts/MainLayout";
 
 // Page
@@ -16,18 +14,6 @@ const Register = () => {
  </p>
  </div>
  <RegisterForm />
- <div className="flex flex-col items-center justify-center">
- <SubmitButton text="ลงทะเบียน" />
- <div className="flex space-x-2 px-2.5 py-2">
- <span className="text-base-johnjud-gray">มีบัญชีอยู่แล้ว?</span>
- <Link
- to="/login"
- className="text-base font-semibold text-black underline"
- >
- คลิกเพื่อเข้าสู่ระบบ
- </Link>
- </div>
- </div>
  </div>
  );
 };

diff --git a/src/components/Form/LoginForm.tsx b/src/components/Form/LoginForm.tsx
@@ -2,46 +2,61 @@ import { Link } from "react-router-dom";
 import checkIcon from "../../assets/formIcon/check.svg";
 import lockIcon from "../../assets/formIcon/lock.svg";
 import userIcon from "../../assets/formIcon/user.svg";
+import SubmitButton from "./SubmitButton";
 
 const LoginForm = () => {
  return (
- <form className="flex w-full flex-col items-center justify-center space-y-4 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
- <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
- <img src={userIcon} alt="Icon" className="mx-2" />
- <input
- type="text"
- placeholder="ชื่อผู้ใช้"
- className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
- />
- </div>
- <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
- <img src={lockIcon} alt="Icon" className="mx-2" />
- <input
- type="password"
- placeholder="รหัสผ่าน"
- className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
- />
- </div>
- <div className="flex w-full justify-between">
- <label className="flex cursor-pointer items-center">
+ <form className="flex w-full flex-col items-center justify-center space-y-20 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
+ <div className="flex w-full flex-col items-center justify-center space-y-4">
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={userIcon} alt="Icon" className="mx-2" />
  <input
- type="checkbox"
- className="peer sr-only"
- id="custom-checkbox"
+ type="text"
+ placeholder="ชื่อผู้ใช้"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
  />
- <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-johnjud-light-gray peer-checked:hidden" />
- <div className="hidden h-5 w-5 items-center justify-center rounded-sm bg-primary peer-checked:flex">
- <img src={checkIcon} alt="Icon" className="h-4 w-4" />
- </div>
+ </div>
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={lockIcon} alt="Icon" className="mx-2" />
+ <input
+ type="password"
+ placeholder="รหัสผ่าน"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="flex w-full justify-between">
+ <label className="flex cursor-pointer items-center">
+ <input
+ type="checkbox"
+ className="peer sr-only"
+ id="custom-checkbox"
+ />
+ <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-johnjud-light-gray peer-checked:hidden" />
+ <div className="hidden h-5 w-5 items-center justify-center rounded-sm bg-primary peer-checked:flex">
+ <img src={checkIcon} alt="Icon" className="h-4 w-4" />
+ </div>
 
- <span className="ml-2 text-johnjud-gray">จดจำฉัน</span>
- </label>
- <Link
- to="/forgot-password"
- className="text-base font-medium text-johnjud-gray underline"
- >
- ลืมรหัสผ่าน?
- </Link>
+ <span className="ml-2 text-black">จดจำฉัน</span>
+ </label>
+ <Link
+ to="/forgot-password"
+ className="text-base font-medium text-johnjud-gray underline"
+ >
+ ลืมรหัสผ่าน?
+ </Link>
+ </div>
+ </div>
+ <div className="flex flex-col items-center justify-center">
+ <SubmitButton text="เข้าสู่ระบบ" />
+ <div className="flex space-x-2 px-2.5 py-2">
+ <span className="text-base-johnjud-gray">ยังไม่มีบัญชี?</span>
+ <Link
+ to="/register"
+ className="text-base font-semibold text-black underline"
+ >
+ ลงทะเบียน
+ </Link>
+ </div>
  </div>
  </form>
  );

diff --git a/src/components/Form/RegisterForm.tsx b/src/components/Form/RegisterForm.tsx
@@ -1,40 +1,56 @@
+import { Link } from "react-router-dom";
 import lockIcon from "../../assets/formIcon/lock.svg";
 import userIcon from "../../assets/formIcon/user.svg";
+import SubmitButton from "./SubmitButton";
 
 const RegisterForm = () => {
  return (
- <form className="flex w-full flex-col items-center justify-center space-y-4 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
- <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
- <img src={userIcon} alt="Icon" className="mx-2" />
- <input
- type="text"
- placeholder="ชื่อ"
- className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
- />
+ <form className="flex w-full flex-col items-center justify-center space-y-12 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
+ <div className="flex w-full flex-col items-center justify-center space-y-4">
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={userIcon} alt="Icon" className="mx-2" />
+ <input
+ type="text"
+ placeholder="ชื่อ"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={userIcon} alt="Icon" className="mx-2" />
+ <input
+ type="text"
+ placeholder="นามสกุล"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={userIcon} alt="Icon" className="mx-2" />
+ <input
+ type="email"
+ placeholder="อีเมล"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={lockIcon} alt="Icon" className="mx-2" />
+ <input
+ type="password"
+ placeholder="รหัสผ่าน"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
  </div>
- <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
- <img src={userIcon} alt="Icon" className="mx-2" />
- <input
- type="text"
- placeholder="นามสกุล"
- className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
- />
- </div>
- <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
- <img src={userIcon} alt="Icon" className="mx-2" />
- <input
- type="email"
- placeholder="อีเมล"
- className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
- />
- </div>
- <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
- <img src={lockIcon} alt="Icon" className="mx-2" />
- <input
- type="password"
- placeholder="รหัสผ่าน"
- className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
- />
+ <div className="flex flex-col items-center justify-center">
+ <SubmitButton text="ลงทะเบียน" />
+ <div className="flex space-x-2 px-2.5 py-2">
+ <span className="text-base-johnjud-gray">มีบัญชีอยู่แล้ว?</span>
+ <Link
+ to="/login"
+ className="text-base font-semibold text-black underline"
+ >
+ คลิกเพื่อเข้าสู่ระบบ
+ </Link>
+ </div>
  </div>
  </form>
  );

diff --git a/src/components/Form/SubmitButton.tsx b/src/components/Form/SubmitButton.tsx
@@ -8,7 +8,10 @@ const SubmitButton: React.FC<SubmitButtonProps> = ({
  text,
 }: SubmitButtonProps) => {
  return (
- <button className="w-full text-nowrap rounded-3xl bg-primary px-28 py-3 text-2xl font-semibold text-white focus:outline-none">
+ <button
+ type="submit"
+ className="w-full text-nowrap rounded-3xl bg-primary px-28 py-3 text-2xl font-semibold text-white focus:outline-none"
+ >
  {text}
  </button>
  );