Add navbar

next-app/src/app/layout.js

@@ -1,20 +1,20 @@
-import localFont from "next/font/local";
-import "./globals.css";
+import localFont from 'next/font/local';
+import './globals.css';
 
 const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
+  src: './fonts/GeistVF.woff',
+  variable: '--font-geist-sans',
+  weight: '100 900',
 });
 const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+  src: './fonts/GeistMonoVF.woff',
+  variable: '--font-geist-mono',
+  weight: '100 900',
 });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({ children }) {

next-app/src/app/page.js

@@ -1,5 +1,9 @@
-import Image from 'next/image';
+import Navbar from '../components/Navbar.jsx';
 
 export default function Home() {
-  return <></>;
+  return (
+    <>
+      <Navbar />
+    </>
+  );
 }

next-app/src/components/Navbar.jsx

@@ -0,0 +1,25 @@
+// src/components/Navbar.js
+
+import Link from 'next/link';
+
+export default function Navbar() {
+  return (
+    <nav className="bg-gray-800 p-4 flex justify-between items-center mx-auto">
+      <Link
+        href="/"
+        className="text-gray-300 hover:text-white text-lg font-bold"
+      >
+        Your Name
+      </Link>
+
+      <div className="space-x-4">
+        <Link href="/about" className="text-gray-300 hover:text-white">
+          About Me
+        </Link>
+        <Link href="/contact" className="text-gray-300 hover:text-white">
+          Contact
+        </Link>
+      </div>
+    </nav>
+  );
+}