Skip to content

Commit

Permalink
Merge pull request #7 from sinatra-pod/master
Browse files Browse the repository at this point in the history
retrieved latest changes from master
  • Loading branch information
sinatra-ms authored Jan 25, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents b31d4c3 + 7056f44 commit 2ea6250
Showing 5 changed files with 76 additions and 8 deletions.
15 changes: 15 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -14,6 +14,7 @@
"firebase": "^9.16.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-router-dom": "^6.7.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
2 changes: 2 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -2,11 +2,13 @@ import React from "react";
import { Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./views/Home";
import Login from "./views/Login";

function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
</Routes>
);
}
19 changes: 11 additions & 8 deletions src/views/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import React from 'react'
import useHeader from '../hooks/useHeader'
import React from "react";
import useHeader from "../hooks/useHeader";

function Home() {


// extract the header from the hook
// Header extracted will be used to determine the current page

// extract the header from the hook
// Header extracted will be used to determine the current page
const {header} = useHeader("Home")
// Header extracted will be used to determine the current page
const { header } = useHeader("Home");

return (
<div className="text-red-400 text-4xl flex justify-center items-center h-[100vh] text-center">
This the {header} Page
</div>
)
);
}

export default Home
export default Home;
47 changes: 47 additions & 0 deletions src/views/Login.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from "react";
import useHeader from "../hooks/useHeader";
import { FcGoogle } from "react-icons/fc";
import { AiFillFacebook } from "react-icons/ai";

function Login() {
return (
<div className="relative w-full h-screen bg-zinc-900/90">
<div className="flex justify-center items-center h-full">
<form className="max-w-[400px] w-full mx-auto bg-white p-8">
<h2 className="text-4xl font-bold text-center py-4">THE FORCE</h2>
<div className="flex justify-between py-8">
<p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
<FcGoogle className="mr-2" /> Google
</p>
<p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
<AiFillFacebook className="mr-2" /> Facebook
</p>
</div>
<div className="flex flex-col mb-4">
<label>Username</label>
<input type="text" className="border relative bg-gray-100 p-2" />
</div>
<div className="flex flex-col">
<label>Password</label>
<input
type="password"
className="border relative bg-gray-100 p-2"
/>
</div>
<button className="w-full py-4 mt-8 bg-zinc-900/90 text-white">
Sign In
</button>
<div>
<p className="flex items-center mt-2">
<input type="checkbox" className="mr-2" />
Remember Me
</p>
<p className="text-center mt-8">Create an account</p>
</div>
</form>
</div>
</div>
);
}

export default Login;

0 comments on commit 2ea6250

Please sign in to comment.