feat: make navbar a component
This commit is contained in:
parent
57e99dfd21
commit
02bc32f138
3 changed files with 92 additions and 65 deletions
|
|
@ -1,6 +1,7 @@
|
|||
'use client'
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import { Navbar } from "@/components/navbar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Lock, Mail } from "lucide-react";
|
||||
|
|
@ -12,7 +13,7 @@ export default function Login() {
|
|||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string|null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleLogin = async () => {
|
||||
setError(null);
|
||||
|
|
@ -26,70 +27,77 @@ export default function Login() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center px-6">
|
||||
{/* Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-md"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-center mb-6">Login</h2>
|
||||
<div className="min-h-screen bg-gray-900 text-white flex flex-col">
|
||||
<div className="w-full">
|
||||
<Navbar />
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-500 text-center mb-4">{error}</p>}
|
||||
<div className="flex-1 flex items-center justify-center px-6">
|
||||
{/* Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-md"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-center mb-6">Login</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-gray-400 mb-1">Email</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
{error && <p className="text-red-500 text-center mb-4">{error}</p>}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-gray-400 mb-1">Email</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-400 mb-1">Password</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-gray-400 mb-1">Password</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
|
||||
onClick={handleLogin}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
<div className="my-6 flex items-center">
|
||||
<div className="flex-1 border-t border-gray-600"></div>
|
||||
<p className="px-4 text-gray-400">or</p>
|
||||
<div className="flex-1 border-t border-gray-600"></div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg mt-2 hover:bg-blue-600"
|
||||
onClick={handleGoogleSignIn}
|
||||
>
|
||||
Sign in with Google
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
|
||||
onClick={handleLogin}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
<div className="my-6 flex items-center">
|
||||
<div className="flex-1 border-t border-gray-600"></div>
|
||||
<p className="px-4 text-gray-400">or</p>
|
||||
<div className="flex-1 border-t border-gray-600"></div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg mt-2 hover:bg-blue-600"
|
||||
onClick={handleGoogleSignIn}
|
||||
>
|
||||
Sign in with Google
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-center text-gray-400 mt-4">
|
||||
Don't have an account? <a href="/register" className="text-blue-400 hover:underline">Register</a>
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-gray-400 mt-4">
|
||||
Don't have an account? <a href="/register" className="text-blue-400 hover:underline">Register</a>
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,13 @@
|
|||
'use client'
|
||||
import { motion } from "motion/react";
|
||||
import { Navbar } from "@/components/navbar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowRight, CheckCircle, MessageCircle } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex flex-col items-center">
|
||||
{/* Navbar */}
|
||||
<nav className="w-full py-4 px-8 flex justify-between items-center bg-gray-800 shadow-md">
|
||||
<h1 className="text-2xl font-bold">Todoist</h1>
|
||||
<div className="space-x-4">
|
||||
<button className="px-4 py-2 rounded-lg border-2 font-semibold"><a href="/login">Login</a></button>
|
||||
<button className="px-4 py-2 rounded-lg bg-white text-gray-900 font-semibold">Register</button>
|
||||
</div>
|
||||
</nav>
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<motion.div
|
||||
|
|
|
|||
25
src/components/navbar.tsx
Normal file
25
src/components/navbar.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import Link from "next/link";
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<nav className="w-full py-4 px-8 flex justify-between items-center bg-gray-800 shadow-md">
|
||||
<Link href="/">
|
||||
<h1 className="text-2xl font-bold text-white cursor-pointer">Todoist</h1>
|
||||
</Link>
|
||||
<div className="space-x-4">
|
||||
<Link href="/login">
|
||||
<button className="px-4 py-2 rounded-lg border-2 border-white text-white font-semibold hover:bg-white hover:text-gray-800 transition">
|
||||
Login
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="/register">
|
||||
<button className="px-4 py-2 rounded-lg bg-white text-gray-900 font-semibold hover:bg-gray-200 transition">
|
||||
Register
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export { Navbar };
|
||||
Loading…
Add table
Reference in a new issue