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'
|
'use client'
|
||||||
|
|
||||||
import { motion } from "motion/react";
|
import { motion } from "motion/react";
|
||||||
|
import { Navbar } from "@/components/navbar";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Lock, Mail } from "lucide-react";
|
import { Lock, Mail } from "lucide-react";
|
||||||
|
|
@ -12,7 +13,7 @@ export default function Login() {
|
||||||
|
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [error, setError] = useState<string|null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const handleLogin = async () => {
|
const handleLogin = async () => {
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
@ -26,70 +27,77 @@ export default function Login() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center px-6">
|
<div className="min-h-screen bg-gray-900 text-white flex flex-col">
|
||||||
{/* Card */}
|
<div className="w-full">
|
||||||
<motion.div
|
<Navbar />
|
||||||
initial={{ opacity: 0, y: -20 }}
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
{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">
|
{error && <p className="text-red-500 text-center mb-4">{error}</p>}
|
||||||
<div>
|
|
||||||
<label className="block text-gray-400 mb-1">Email</label>
|
<div className="space-y-4">
|
||||||
<div className="relative">
|
<div>
|
||||||
<Mail className="absolute left-3 top-2 text-gray-500" size={20} />
|
<label className="block text-gray-400 mb-1">Email</label>
|
||||||
<Input
|
<div className="relative">
|
||||||
type="email"
|
<Mail className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||||
placeholder="Enter your email"
|
<Input
|
||||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
type="email"
|
||||||
value={email}
|
placeholder="Enter your email"
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
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>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-gray-400 mb-1">Password</label>
|
<label className="block text-gray-400 mb-1">Password</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Lock className="absolute left-3 top-2 text-gray-500" size={20} />
|
<Lock className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||||
<Input
|
<Input
|
||||||
type="password"
|
type="password"
|
||||||
placeholder="Enter your password"
|
placeholder="Enter your password"
|
||||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<Button
|
<p className="text-center text-gray-400 mt-4">
|
||||||
className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
|
Don't have an account? <a href="/register" className="text-blue-400 hover:underline">Register</a>
|
||||||
onClick={handleLogin}
|
</p>
|
||||||
>
|
</motion.div>
|
||||||
Login
|
</div>
|
||||||
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,13 @@
|
||||||
'use client'
|
'use client'
|
||||||
import { motion } from "motion/react";
|
import { motion } from "motion/react";
|
||||||
|
import { Navbar } from "@/components/navbar";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { ArrowRight, CheckCircle, MessageCircle } from "lucide-react";
|
import { ArrowRight, CheckCircle, MessageCircle } from "lucide-react";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-900 text-white flex flex-col items-center">
|
<div className="min-h-screen bg-gray-900 text-white flex flex-col items-center">
|
||||||
{/* Navbar */}
|
<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>
|
|
||||||
|
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<motion.div
|
<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