first commit

app/components/NavBar.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { Links } from "./navbarData";
+import Link from "next/link";
+import { usePathname } from "next/navigation"; // for checking active links
+import { useAuth } from "../hooks/useAuth";
+
+const NavBar = () => {
+  const pathname = usePathname();
+  const { isAuthenticated, user, logout, isLoading } = useAuth();
+  console.log(`isAuthenticated ... ${isAuthenticated}`);
+  return (
+    <nav className="navbar bg-base-100 shadow-sm">
+      <div className="navbar-start">
+        <div className="dropdown">
+          <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              {" "}
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h8m-8 6h16"
+              />{" "}
+            </svg>
+          </div>
+          <ul
+            tabIndex={-1}
+            className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
+          >
+            {Links.map((l) => {
+              const { id, url, text } = l;
+              return (
+                <li
+                  className={`${pathname === url ? "menu-active" : ""}`}
+                  key={id}
+                >
+                  {/* here we use Link  */}
+                  <Link href={url}>{text}</Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <a className="btn btn-ghost text-xl">Adv WebDev</a>
+      </div>
+      <div className="navbar-center hidden lg:flex">
+        <ul className="menu menu-horizontal px-1">
+          {Links.map((l) => {
+            const { id, url, text } = l;
+            return (
+              <li
+                className={`${pathname === url ? "menu-active" : ""}`}
+                key={id}
+              >
+                {/* here we use Link  */}
+                <Link href={url}>{text}</Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      <div className="navbar-end">
+        {isAuthenticated ? (
+          <div className="dropdown dropdown-end">
+            <div
+              tabIndex={0}
+              role="button"
+              className="btn btn-ghost btn-circle avatar placeholder"
+            >
+              <div className="bg-primary text-primary-content w-10 rounded-full flex items-center justify-center">
+                <span className="text-lg">
+                  {user?.name?.charAt(0).toUpperCase()}
+                </span>
+              </div>
+            </div>
+            <ul
+              tabIndex={0}
+              className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+            >
+              <li className="menu-title">{user?.name}</li>
+              <li>
+                <button onClick={logout}>Logout</button>
+              </li>
+            </ul>
+          </div>
+        ) : (
+          <div className="flex gap-2">
+            <Link href="/login" className="btn btn-ghost btn-sm">
+              Login
+            </Link>
+            <Link href="/register" className="btn btn-primary btn-sm">
+              Sign Up
+            </Link>
+          </div>
+        )}
+        {/* {" "}
+        <div className="flex gap-2">
+          <Link href="/login" className="btn btn-ghost btn-sm">
+            Login
+          </Link>
+          <Link href="/register" className="btn btn-primary btn-sm">
+            Sign Up
+          </Link>
+        </div> */}
+      </div>
+    </nav>
+  );
+};
+
+export default NavBar;

app/components/Providers.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { AuthProvider } from "../hooks/useAuth";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <AuthProvider>{children}</AuthProvider>;
+}

app/components/navbarData.tsx

@@ -0,0 +1,23 @@
+interface Link {
+  id: number;
+  url: string;
+  text: string;
+}
+
+export const Links: Link[] = [
+  {
+    id: 1,
+    url: "/",
+    text: "home",
+  },
+  {
+    id: 2,
+    url: "/people",
+    text: "People",
+  },
+  {
+    id: 3,
+    url: "/newsletters",
+    text: "Newsletters",
+  },
+];