diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx new file mode 100644 index 00000000..a5b60d65 --- /dev/null +++ b/src/app/login/page.tsx @@ -0,0 +1,24 @@ +import LoginForm from "../../components/Form/LoginForm"; +import MainLayout from "../../layouts/MainLayout"; + +// Page +const Login = () => { + return ( +
+
+

+ เข้าสู่ระบบ +

+

+ เข้าสู่ระบบของคุณ +

+
+ +
+ ); +}; + +export default Login; + +// Layout +export const Layout = MainLayout; diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx new file mode 100644 index 00000000..a5ea1975 --- /dev/null +++ b/src/app/register/page.tsx @@ -0,0 +1,24 @@ +import RegisterForm from "../../components/Form/RegisterForm"; +import MainLayout from "../../layouts/MainLayout"; + +// Page +const Register = () => { + return ( +
+
+

+ ลงทะเบียน +

+

+ ลงทะเบียนบัญชีของคุณ +

+
+ +
+ ); +}; + +export default Register; + +// Layout +export const Layout = MainLayout; diff --git a/src/assets/formIcon/check.svg b/src/assets/formIcon/check.svg new file mode 100644 index 00000000..42954eb6 --- /dev/null +++ b/src/assets/formIcon/check.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/formIcon/lock.svg b/src/assets/formIcon/lock.svg new file mode 100644 index 00000000..67d0870a --- /dev/null +++ b/src/assets/formIcon/lock.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/formIcon/user.svg b/src/assets/formIcon/user.svg new file mode 100644 index 00000000..b981b975 --- /dev/null +++ b/src/assets/formIcon/user.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Form/LoginForm.tsx b/src/components/Form/LoginForm.tsx new file mode 100644 index 00000000..596889c6 --- /dev/null +++ b/src/components/Form/LoginForm.tsx @@ -0,0 +1,65 @@ +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 ( +
+
+
+ Icon + +
+
+ Icon + +
+
+
+
+ +
+ ยังไม่มีบัญชี? + + ลงทะเบียน + +
+
+ + ); +}; + +export default LoginForm; diff --git a/src/components/Form/RegisterForm.tsx b/src/components/Form/RegisterForm.tsx new file mode 100644 index 00000000..5b906c8d --- /dev/null +++ b/src/components/Form/RegisterForm.tsx @@ -0,0 +1,59 @@ +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 ( +
+
+
+ Icon + +
+
+ Icon + +
+
+ Icon + +
+
+ Icon + +
+
+
+ +
+ มีบัญชีอยู่แล้ว? + + คลิกเพื่อเข้าสู่ระบบ + +
+
+
+ ); +}; + +export default RegisterForm; diff --git a/src/components/Form/SubmitButton.tsx b/src/components/Form/SubmitButton.tsx new file mode 100644 index 00000000..c1222a5b --- /dev/null +++ b/src/components/Form/SubmitButton.tsx @@ -0,0 +1,20 @@ +import React, { ReactNode } from "react"; + +interface SubmitButtonProps { + text: ReactNode; +} + +const SubmitButton: React.FC = ({ + text, +}: SubmitButtonProps) => { + return ( + + ); +}; + +export default SubmitButton; diff --git a/tailwind.config.js b/tailwind.config.js index b9d39c6b..fa6439d3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,6 +15,7 @@ export default { "johnjud-purple": "#3D0D40", "johnjud-gray": "#808086", "johnjud-yellow": "#FFFF31", + "johnjud-light-gray": "#D9D9D9", }, }, },