Skip to content

Commit a85bf91

Browse files
yogeshpaliyalUmeshPaliyaal
yogeshpaliyal
and
UmeshPaliyaal
authored
My branch (#23)
* pushed * LoginForm * Quote , login , register pages added * Login with google function added * Update in registration page Earlier when we click on register without entering credentials , it was letting us to direct login page ,fixed issue now it warns about to fill the inputs. * Update Register.tsx * deleted Compnants * images path changed * all sorted * deleted Quote.tsx * my branch mereger * quote update * css files deleted and tailwind applied * format adjusted * Librarylist page added * major changes * .. * Saperate component Modale added alongwith minor css changes * Update package.json * Update package.json * package.json changes --------- Co-authored-by: umesh choudhary paliyal <paliyalumesh@gmail.com>
1 parent 1d7efe5 commit a85bf91

File tree

20 files changed

+2280
-4208
lines changed

20 files changed

+2280
-4208
lines changed

‎package-lock.json

Lines changed: 1566 additions & 4174 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@radix-ui/react-checkbox": "1.1.1",
1314
"@radix-ui/react-slot": "1.1.0",
1415
"@reduxjs/toolkit": "2.2.6",
1516
"class-variance-authority": "0.7.0",
1617
"clsx": "2.1.1",
1718
"lucide-react": "0.399.0",
1819
"react": "^18.3.1",
1920
"react-dom": "^18.3.1",
21+
"react-icons": "^5.2.1",
2022
"react-redux": "9.1.2",
2123
"react-router-dom": "6.24.0",
2224
"tailwind-merge": "2.3.0",
@@ -34,8 +36,13 @@
3436
"eslint-plugin-react-hooks": "^4.6.2",
3537
"eslint-plugin-react-refresh": "^0.4.7",
3638
"postcss": "^8.4.38",
39+
"react-router-dom": "6.24.0",
3740
"tailwindcss": "^3.4.4",
3841
"typescript": "^5.2.2",
39-
"vite": "^5.3.1"
42+
"vite": "^5.3.1",
43+
"webpack-cli": "^5.1.4"
44+
},
45+
"optionalDependencies": {
46+
"@rollup/rollup-linux-x64-gnu": "4.9.5"
4047
}
4148
}

‎public/images/book.jpg

6.4 KB
Loading

‎public/images/user.png

2.83 KB
Loading

‎src/App.css

Whitespace-only changes.

‎src/App.tsx

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import { BrowserRouter, Route, Routes } from "react-router-dom";
2-
import LandingPage from "./Pages/LandingPage";
3-
import NotFound from "./NotFound";
1+
2+
import './App.css'
3+
import LoginForm from './Pages/LoginForm/LoginForm';
4+
import Register from './Pages/register/Register';
5+
import LandingPage from './Pages/LandingPage'
6+
import { BrowserRouter, Routes, Route } from 'react-router-dom';
7+
import Librarylist from './Pages/Librarylist';
8+
import Users from './Pages/Users';
49

510
function App() {
611
return (
7-
<>
8-
<BrowserRouter>
9-
<Routes>
10-
<Route path="*" element={<NotFound />} />
11-
<Route path="LibraryManagement" element={<LandingPage />} />
12-
<Route
13-
path="LibraryManagement/management/login"
14-
element={<LandingPage />}
15-
/>
16-
<Route
17-
path="LibraryManagement/user/login"
18-
element={<LandingPage />}
19-
/>
20-
</Routes>
21-
</BrowserRouter>
22-
</>
23-
);
12+
<BrowserRouter basename="/LibraryManagement">
13+
<Routes>
14+
<Route path="/" element={<LandingPage />} />
15+
<Route path="/library/login" element={<LoginForm up='library'/>} />
16+
<Route path="/user/login" element={<LoginForm up='user'/>} />
17+
<Route path='/register' element={<Register/>}/>
18+
<Route path='/librarylist' element={<Librarylist/>}/>
19+
<Route path='/users' element={<Users/>}/>
20+
21+
22+
23+
</Routes>
24+
</BrowserRouter>
25+
)
2426
}
2527

2628
export default App;

‎src/Pages/LandingPage.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
11
import { Button } from "@/components/ui/button";
2-
import { Link } from "react-router-dom";
2+
import { useNavigate } from "react-router-dom";
33
import { increment, decrement } from "../store/features/counter/counterSlice";
44
import { useDispatch, useSelector } from "react-redux";
55
import { RootState } from "../store/store";
66

7+
78
const LandingPage = () => {
9+
const navigate = useNavigate();
10+
11+
const handleCreateLibrary = () => {
12+
navigate("library/login");
13+
};
14+
15+
const handleJoinLibrary = () => {
16+
navigate("user/login");
17+
};
18+
19+
20+
821
const count = useSelector((state: RootState) => state.counter.count);
922
const dispatch = useDispatch();
1023

@@ -37,12 +50,10 @@ const LandingPage = () => {
3750

3851

3952
<div className="flex gap-[20px] mt-[50px]">
40-
<Link to={"management/login"}>
41-
<Button variant="outline">Create A Library</Button>
42-
</Link>
43-
<Link to={"management/login"}>
44-
<Button>Join A Library</Button>
45-
</Link>
53+
<Button variant="outline" onClick={handleCreateLibrary}>
54+
Create A Library
55+
</Button>
56+
<Button onClick={handleJoinLibrary}>Join A Library</Button>
4657
</div>
4758
</div>
4859
);

‎src/Pages/Librarylist.tsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { useState } from "react";
2+
import { Input } from "@/components/ui/input";
3+
import { Button } from "@/components/ui/button";
4+
import Nav from "@/mycomponents/Nav";
5+
import Modal from "@/mycomponents/Modal";
6+
7+
function Librarylist() {
8+
const [isModalOpen, setIsModalOpen] = useState(false);
9+
const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);
10+
11+
const [selectLibrary, setSelectLibrary] = useState<Library | null>(null);
12+
13+
interface Library {
14+
id: number;
15+
name: string;
16+
description: string;
17+
image: string;
18+
}
19+
20+
const libraries: Library[] = [
21+
{
22+
id: 1,
23+
name: "library 1",
24+
description: "hbn",
25+
image: "./images/book.jpg",
26+
},
27+
{
28+
id: 2,
29+
name: "library 2",
30+
description: "good library",
31+
image: "./images/book.jpg",
32+
},
33+
{
34+
id: 3,
35+
name: "library 3",
36+
description: "wifi available",
37+
image: "./images/book.jpg",
38+
},
39+
];
40+
41+
const openModal = (library: Library) => {
42+
setSelectLibrary(library);
43+
setIsModalOpen(true);
44+
};
45+
46+
const openSecondModal = () => {
47+
setIsModalOpen(false);
48+
setIsSecondModalOpen(true);
49+
};
50+
const closeSecondModal = () => {
51+
setIsSecondModalOpen(false);
52+
};
53+
54+
return (
55+
<div>
56+
57+
<div className="flex items-center justify-center h-full ">
58+
<div className="flex flex-col w-11/12 gap-8">
59+
<div>
60+
<Nav />
61+
<h1 className="text-[48px] ml-4 mt-3 font-bold">
62+
List of Libraries
63+
</h1>
64+
<p className=" text-[18px] text-gray-400 ml-4">
65+
Search for your suitable library
66+
</p>
67+
</div>
68+
<Input className="mt-2" placeholder="Search Library"></Input>
69+
{/* library lists */}
70+
{libraries.map((library) => (
71+
<div
72+
key={library.id}
73+
className="flex flex-row h-36 w-full border border-neutral-300 rounded-r-2xl rounded-l-2xl"
74+
>
75+
<div className="h-28 w-28 mx-4 my-4 ">
76+
<img src={library.image} alt="" />
77+
</div>
78+
<div className="space-y-2">
79+
<h1 className="text-[28px] font-bold space-x-3">
80+
{library.name}
81+
</h1>
82+
<p id="description" className="text-gray-400 ">
83+
library having Ac, Wifi etc.
84+
</p>
85+
<Button onClick={() => openModal(library)}>Book Now</Button>
86+
</div>
87+
</div>
88+
))}
89+
</div>
90+
</div>
91+
{isModalOpen && selectLibrary && (
92+
<Modal user="first" library={selectLibrary.name} onProceed={openSecondModal} onClose={closeSecondModal}/>
93+
)}
94+
{isSecondModalOpen && selectLibrary && (
95+
<Modal user="second" library={selectLibrary.name} onProceed={openSecondModal} onClose = { closeSecondModal}/>
96+
)}
97+
</div>
98+
);
99+
}
100+
101+
export default Librarylist;

‎src/Pages/LoginForm/LoginForm.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { FaUser, FaLock } from "react-icons/fa";
2+
import { Input } from "@/components/ui/input";
3+
import { Button } from "@/components/ui/button";
4+
import { Checkbox } from "@/components/ui/checkbox";
5+
import { Link } from "react-router-dom";
6+
import Quote from "@/mycomponents/Quote";
7+
import { twMerge } from "tailwind-merge";
8+
import { useNavigate } from "react-router-dom";
9+
import libraryimage from "./images/library.jpg";
10+
import googleimage from "./images/Google.jpg";
11+
interface LoginFormProps {
12+
up: string;
13+
}
14+
15+
const LoginForm: React.FC<LoginFormProps> = (props) => {
16+
const navigate = useNavigate();
17+
18+
const goList = () => {
19+
if (props.up == "user") {
20+
navigate("/librarylist");
21+
} else {
22+
navigate("/users");
23+
}
24+
};
25+
return (
26+
<div
27+
className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}
28+
>
29+
<div className={twMerge("md:w-1/2 relative")}>
30+
<img
31+
className={twMerge("h-full w-full object-cover")}
32+
src={libraryimage}
33+
alt=""
34+
/>
35+
<div className="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center text-white text-center">
36+
<Quote />
37+
</div>
38+
</div>
39+
40+
<div className="md:w-1/2 flex items-center justify-center">
41+
<form
42+
onSubmit={goList}
43+
className={twMerge(
44+
"border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded"
45+
)}
46+
>
47+
<h1 className={twMerge("text-2xl text-center mb-6")}>Log In</h1>
48+
<div className={twMerge("flex flex-col gap-6")}>
49+
<div className={twMerge("relative")}>
50+
<Input type="email" placeholder="Email" />
51+
<FaUser
52+
className={twMerge(
53+
"absolute right-3 top-1/2 transform -translate-y-1/2"
54+
)}
55+
/>
56+
</div>
57+
<div className={twMerge("relative")}>
58+
<Input type="password" placeholder="Password" />
59+
<FaLock
60+
className={twMerge(
61+
"absolute right-3 top-1/2 transform -translate-y-1/2"
62+
)}
63+
/>
64+
</div>
65+
</div>
66+
<div className={twMerge("flex items-center gap-14 mt-4")}>
67+
<label>
68+
<Checkbox className="ml-5" /> Remember me
69+
</label>
70+
<Link className={twMerge("text-blue-700")} to="/">
71+
Forgot password?
72+
</Link>
73+
</div>
74+
<Button type="submit" className={twMerge("w-full mt-6")}>
75+
Login
76+
</Button>
77+
<p
78+
className={twMerge(
79+
'mt-6 text-center relative flex items-center my-4 before:content-[""] before:flex-1 before:border-b before:border-black before:mx-3 after:content-[""] after:flex-1 after:border-b after:border-black after:mx-3'
80+
)}
81+
>
82+
Or Login with
83+
</p>
84+
<div className={twMerge("flex justify-center gap-4 mt-2")}>
85+
<Button
86+
variant="outline"
87+
className={twMerge("flex items-center gap-1")}
88+
>
89+
<img
90+
className={twMerge("h-3 w-3")}
91+
src={googleimage}
92+
alt="Google"
93+
/>
94+
Google
95+
</Button>
96+
</div>
97+
<div className={twMerge("text-center mt-4")}>
98+
<p>
99+
Want to register?{" "}
100+
<Link className={twMerge("text-blue-700")} to="/register">
101+
Register
102+
</Link>
103+
</p>
104+
</div>
105+
</form>
106+
</div>
107+
</div>
108+
);
109+
};
110+
111+
export default LoginForm;

‎src/Pages/LoginForm/images/Google.jpg

60.2 KB
Loading

0 commit comments

Comments
 (0)