feat: make navbar a component

src/app/login/page.tsx

@@ -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,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>
     );
 }

src/app/page.tsx

@@ -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 */}
+      <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 */}
       <motion.div

src/components/navbar.tsx

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