What I cover
- Updates to project
- Navigation component
- Sign in component
- Sign up component
- Auth page
Update: I moved the routing to be in the App.tsx file. Now, the index.tsx file is just rendering the App.
Current App.tsx file
import { Routes, Route } from 'react-router-dom';
import Launch from './components/launch/launch.component';
import Navigation from './components/navigation/navigation.component';
import AuthPage from './routes/auth/auth-page';
function App() {
return (
<>
<Navigation />
<Routes>
<Route path="/" element={<Launch />} />
<Route path="auth/:userSelect" element={<AuthPage />} />
</Routes>
</>
);
}
export default App;
The launch page is at "/" route, auth page is gonna be dynamic (hence "/*"). In the end, it will either be "/auth/employers" or "/auth/employees" depending on what the user selects on the launch page.
Navigation
I added a navigation component that only contains the logo that redirects back to the launch page.
import React from 'react';
import { Link } from 'react-router-dom';
const Navigation: React.FunctionComponent = () => {
return (
<header className="logo h-16 sticky top-0 z-10">
<Link to="/">
Hire <span style={{ color: '#f7578c' }}>+Plus</span>
</Link>
</header>
);
};
export default Navigation;
Sign in Component
I removed the use of styled components and added tailwind styles.
(view the source code for sign in component)
I had some issues rendering the google icon in typescript. Turns out I had to configure it to typescript.
Added index.d.ts file to root dir. Then, added this
declare module '*.png';
declare module '*.jpg';
inside tsconfig.json I added the file to the include array
"include": ["src", "index.d.ts"]
I added an assets folder for my images/icons
Sign up Component
I created the folder and component for the sign-up page using typescript.
(view the source code for sign up component)
Auth page
The auth page renders both sign-in and sign-up components side-by-side. Based on what the user chooses (employer or employee) I'll handle the form submission accordingly. (In this case, the userSelect params you see here).
import SignIn from '../../components/sign-in/sign-in.component';
import { useParams } from 'react-router-dom';
import Signup from '../../components/sign-up/sign-up.component';
const AuthPage: React.FunctionComponent = () => {
const { userSelect } = useParams();
console.log(userSelect);
return (
<section className="text-gray-600 body-font">
<div className="container flex flex-wrap px-5 py-10 mx-auto items-center justify-center">
<div className="md:w-1/2 md:pr-5 md:py-8 md:border-r md:border-b-0 mb-10 md:mb-0 pb-10 border-b border-gray-200">
<SignIn />
</div>
<div className="flex flex-col md:w-1/2">
<Signup />
</div>
</div>
</section>
);
};
export default AuthPage;
Finally, this is what that launch page is looking like at the moment
This is what the auth page looks like
That's all for now, stay tuned for the testing portion of these components!
Top comments (0)