add signup panel

This commit is contained in:
Wissarut Kanasub 2023-11-18 10:56:18 +07:00
parent 48caf70f45
commit 8954bff358
4 changed files with 86 additions and 0 deletions

View File

@ -16,6 +16,9 @@
"@dnd-kit/utilities": "^3.2.2",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@fullcalendar/core": "^6.1.9",
"@fullcalendar/daygrid": "^6.1.9",
"@fullcalendar/interaction": "^6.1.9",

View File

@ -23,6 +23,15 @@ dependencies:
'@emotion/styled':
specifier: ^11.11.0
version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.37)(react@18.2.0)
'@fortawesome/fontawesome-svg-core':
specifier: ^6.4.2
version: 6.4.2
'@fortawesome/free-brands-svg-icons':
specifier: ^6.4.2
version: 6.4.2
'@fortawesome/react-fontawesome':
specifier: ^0.2.0
version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0)
'@fullcalendar/core':
specifier: ^6.1.9
version: 6.1.9
@ -820,6 +829,39 @@ packages:
resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
dev: false
/@fortawesome/fontawesome-common-types@6.4.2:
resolution: {integrity: sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==}
engines: {node: '>=6'}
requiresBuild: true
dev: false
/@fortawesome/fontawesome-svg-core@6.4.2:
resolution: {integrity: sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==}
engines: {node: '>=6'}
requiresBuild: true
dependencies:
'@fortawesome/fontawesome-common-types': 6.4.2
dev: false
/@fortawesome/free-brands-svg-icons@6.4.2:
resolution: {integrity: sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==}
engines: {node: '>=6'}
requiresBuild: true
dependencies:
'@fortawesome/fontawesome-common-types': 6.4.2
dev: false
/@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0):
resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==}
peerDependencies:
'@fortawesome/fontawesome-svg-core': ~1 || ~6
react: '>=16.3'
dependencies:
'@fortawesome/fontawesome-svg-core': 6.4.2
prop-types: 15.8.1
react: 18.2.0
dev: false
/@fullcalendar/core@6.1.9:
resolution: {integrity: sha512-eeG+z9BWerdsU9Ac6j16rpYpPnE0wxtnEHiHrh/u/ADbGTR3hCOjCD9PxQOfhOTHbWOVs7JQunGcksSPu5WZBQ==}
dependencies:

View File

@ -12,6 +12,7 @@ import IconSideNav from "./components/navigations/IconSideNav";
import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
import PrivateRoute from "./PrivateRoute";
import ProfileUpdatePage from "./components/profilePage";
import Signup from "./components/signup/Signup";
const App = () => {
@ -43,6 +44,7 @@ const App = () => {
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignUpPage />} />
</Routes>
<Signup/>
</div>
</div>
</div>

View File

@ -0,0 +1,39 @@
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons';
function Signup() {
return (
<div className="flex items-center justify-center h-screen">
<div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md">
<h1 className="text-4xl font-semibold mb-6">Create your account</h1>
<p className="text-gray-700 mb-6 text-lg">
Start spending more time on your own table.
</p>
<div className='font-bold'>
<div className="mb-4">
<button className="flex items-center justify-center bg-blue-500 text-white px-14 py-3 rounded-lg">
<span className="mr-3"><FontAwesomeIcon icon={faGoogle} /></span>
Sign Up with Google
</button>
</div>
<div className="mb-4">
<button className="flex items-center justify-center bg-gray-800 text-white px-14 py-3 rounded-lg">
<span className="mr-3"><FontAwesomeIcon icon={faGithub} /></span>
Sign Up with Github
</button>
</div>
<div>
<button className="bg-green-500 text-white px-14 py-3 rounded-lg">
Sign Up with your email.
</button>
</div>
</div>
</div>
</div>
);
}
export default Signup;