clerkauth

implemented, sync with db to be added

apps/admin/src/components/Navigation.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { type ReactElement } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Home, Users, BarChart3, User } from "lucide-react";
+import { SignedIn, UserButton } from "@clerk/nextjs";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ElementType;
+}
+
+const navItems: NavItem[] = [
+  {
+    href: "/",
+    label: "Dashboard",
+    icon: Home,
+  },
+  {
+    href: "/users",
+    label: "Clients",
+    icon: Users,
+  },
+  {
+    href: "/analytics",
+    label: "Analytics",
+    icon: BarChart3,
+  },
+  {
+    href: "/profile",
+    label: "Profile",
+    icon: User,
+  },
+];
+
+export function Navigation(): ReactElement {
+  const pathname = usePathname();
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <nav className="container mx-auto px-4 h-16">
+        <div className="flex h-full items-center justify-between">
+          {/* Logo */}
+          <Link
+            href="/"
+            className="text-xl font-bold text-[#FF0000] hover:text-[#00FF00] transition-colors"
+          >
+            FitAI
+          </Link>
+
+          {/* Navigation Items */}
+          <ul
+            className="flex-1 flex justify-center items-center"
+            style={{ gap: "3rem" }}
+          >
+            {navItems.map((item) => (
+              <li key={item.href}>
+                <Button
+                  asChild
+                  variant={pathname === item.href ? "default" : "ghost"}
+                  size="sm"
+                  className={cn(
+                    "h-9 px-4 py-2",
+                    pathname === item.href &&
+                      "bg-primary text-primary-foreground",
+                  )}
+                  aria-current={pathname === item.href ? "page" : undefined}
+                >
+                  <Link href={item.href} className="flex items-center gap-2">
+                    <item.icon className="h-4 w-4" />
+                    <span>{item.label}</span>
+                  </Link>
+                </Button>
+              </li>
+            ))}
+          </ul>
+
+          {/* User Button */}
+          <SignedIn>
+            <UserButton
+              afterSignOutUrl="/"
+              appearance={{
+                elements: {
+                  avatarBox: "h-8 w-8",
+                },
+              }}
+            />
+          </SignedIn>
+        </div>
+      </nav>
+    </header>
+  );
+}