v0.1.0 — Moon Base initial scaffold: auth, garden plant registry + log

src/components/layout/topnav.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+import { LogOut, User } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { initials } from "@/lib/utils";
+
+interface TopNavProps {
+  user: { name: string; email: string; role: string };
+}
+
+export function TopNav({ user }: TopNavProps) {
+  return (
+    <header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background">
+      <div className="flex items-center gap-2 md:hidden">
+        <span className="font-display font-semibold">Moon Base</span>
+      </div>
+
+      <div className="hidden md:block" />
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="gap-2">
+            <div className="h-6 w-6 rounded-full bg-[hsl(var(--leaf))] flex items-center justify-center text-white text-[10px] font-bold">
+              {initials(user.name)}
+            </div>
+            <span className="text-sm hidden sm:inline">{user.name}</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <div className="px-2 py-1.5 text-xs text-muted-foreground">
+            {user.email}
+          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
+            <LogOut className="h-4 w-4 mr-2" />
+            Sign out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </header>
+  );
+}