folfcoder/todoist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: make navbar a component

Browse source
This commit is contained in:
Kai Folf 2025-03-05 21:06:36 +07:00
parent 57e99dfd21
commit 02bc32f138
3 changed files with 92 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app/login/page.tsx
View file

@ -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";
@ -26,7 +27,12 @@ export default function Login() {
};
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">
<div className="w-full">
<Navbar />
</div>
<div className="flex-1 flex items-center justify-center px-6">
{/* Card */}
<motion.div
initial={{ opacity: 0, y: -20 }}
@ -91,5 +97,7 @@ export default function Login() {
</p>
</motion.div>
</div>
</div>
);
}

10
src/app/page.tsx
View file

@ -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
View 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 };