Setup routes and added login page
This commit is contained in:
Manik Maity
@@ -1,14 +1,20 @@
|
||||
import { } from 'react'
|
||||
|
||||
import './App.css'
|
||||
import {} from "react";
|
||||
import "./App.css";
|
||||
import { Routes, Route, BrowserRouter } from "react-router-dom";
|
||||
import Home from "./pages/Home";
|
||||
import Header from "./components/Header/Header";
|
||||
import LoginPage from "./pages/LoginPage";
|
||||
|
||||
function App() {
|
||||
|
||||
return (
|
||||
<div className="bg-slate-700">
|
||||
Hello
|
||||
</div>
|
||||
)
|
||||
<BrowserRouter>
|
||||
<Header/>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/login" element={<LoginPage/>} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
||||
66
frontend/src/components/Header/Header.jsx
Normal file
66
frontend/src/components/Header/Header.jsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from 'react'
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<div className="navbar bg-base-100">
|
||||
<div className="flex-1">
|
||||
<a className="btn btn-ghost text-xl">daisyUI</a>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<div className="dropdown dropdown-end">
|
||||
<div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
|
||||
<div className="indicator">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
<span className="badge badge-sm indicator-item">8</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
tabIndex={0}
|
||||
className="card card-compact dropdown-content bg-base-100 z-[1] mt-3 w-52 shadow">
|
||||
<div className="card-body">
|
||||
<span className="text-lg font-bold">8 Items</span>
|
||||
<span className="text-info">Subtotal: $999</span>
|
||||
<div className="card-actions">
|
||||
<button className="btn btn-primary btn-block">View cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dropdown dropdown-end">
|
||||
<div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
|
||||
<div className="w-10 rounded-full">
|
||||
<img
|
||||
alt="Tailwind CSS Navbar component"
|
||||
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
|
||||
<li>
|
||||
<a className="justify-between">
|
||||
Profile
|
||||
<span className="badge">New</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a>Settings</a></li>
|
||||
<li><a>Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
11
frontend/src/pages/Home.jsx
Normal file
11
frontend/src/pages/Home.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div>
|
||||
Home
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
66
frontend/src/pages/LoginPage.jsx
Normal file
66
frontend/src/pages/LoginPage.jsx
Normal file
@@ -0,0 +1,66 @@
|
||||
// LoginPage.js
|
||||
import React from 'react';
|
||||
|
||||
const LoginPage = () => {
|
||||
return (
|
||||
<div className="flex justify-center p-4">
|
||||
<div className="w-full max-w-md rounded-lg p-8">
|
||||
<h2 className="text-2xl font-semibold text-center text-white mb-6">Login</h2>
|
||||
|
||||
<form className="space-y-4">
|
||||
{/* Email Input */}
|
||||
<div className="form-control w-full">
|
||||
<label className="label">
|
||||
<span className="label-text text-gray-200">Email</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="input input-bordered w-full bg-gray-700 text-white focus:outline-none focus:ring focus:ring-primary"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password Input */}
|
||||
<div className="form-control w-full">
|
||||
<label className="label">
|
||||
<span className="label-text text-gray-200">Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
className="input input-bordered w-full bg-gray-700 text-white focus:outline-none focus:ring focus:ring-primary"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Forgot Password Link */}
|
||||
<div className="text-right">
|
||||
<a href="#" className="text-sm text-primary hover:underline">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary w-full text-white"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="divider text-gray-400">OR</div>
|
||||
|
||||
{/* Sign Up Link */}
|
||||
<p className="text-center text-gray-300">
|
||||
Don’t have an account?{' '}
|
||||
<a href="#" className="text-primary hover:underline">Sign up</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
Reference in New Issue
Block a user