diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx index 93f7bf6..3497e5a 100644 --- a/src/app/dashboard/layout.tsx +++ b/src/app/dashboard/layout.tsx @@ -11,6 +11,7 @@ import { BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; +import { SessionProvider } from "next-auth/react"; import { AppSidebar } from "@/components/app-sidebar"; import { Separator } from "@/components/ui/separator"; @@ -18,30 +19,32 @@ export default function DashboardLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( - - - -
-
- - - - - - - Building Your Application - - - - - Data Fetching - - - -
-
- {children} -
-
+ + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+ {children} +
+
+
); } diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx index f4a5ffc..489400c 100644 --- a/src/components/app-sidebar.tsx +++ b/src/components/app-sidebar.tsx @@ -29,9 +29,9 @@ import { NavSecondary } from "@/components/nav-secondary"; const data = { user: { - name: "shadcn", - email: "m@example.com", - avatar: "/avatars/shadcn.jpg", + name: "gitea", + email: "about@gitea.com", + avatar: "/gitea.svg", }, navMain: [ { diff --git a/src/components/nav-user.tsx b/src/components/nav-user.tsx index c41f18f..3be56fa 100644 --- a/src/components/nav-user.tsx +++ b/src/components/nav-user.tsx @@ -1,31 +1,41 @@ "use client"; import { - BadgeCheck, Bell, - ChevronsUpDown, - CreditCard, + LogIn, LogOut, Sparkles, + BadgeCheck, + CreditCard, + ChevronsUpDown, } from "lucide-react"; +import { useMemo } from "react"; import { + useSidebar, SidebarMenu, SidebarMenuButton, SidebarMenuItem, - useSidebar, } from "@/components/ui/sidebar"; import { DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, DropdownMenuItem, + DropdownMenuGroup, DropdownMenuLabel, - DropdownMenuSeparator, + DropdownMenuContent, DropdownMenuTrigger, + DropdownMenuSeparator, } from "@/components/ui/dropdown-menu"; +import { useSession } from "next-auth/react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; -export function NavUser({ +const UserAvatar = ({ src, alt }: { src: string; alt: string }) => ( + + + CN + +); + +export const NavUser = ({ user, }: { user: { @@ -33,8 +43,20 @@ export function NavUser({ email: string; avatar: string; }; -}) { +}) => { const { isMobile } = useSidebar(); + const { data: session } = useSession(); + + const currentUser = useMemo(() => { + if (session?.user) { + return { + name: session.user.name ?? "Unknown", + email: session.user.email ?? "Unknown", + avatar: session.user.image ?? "/gitea.svg", + }; + } + return user; + }, [session, user]); return ( @@ -45,13 +67,12 @@ export function NavUser({ size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" > - - - CN - +
- {user.name} - {user.email} + + {currentUser.name} + + {currentUser.email}
@@ -62,48 +83,65 @@ export function NavUser({ align="end" sideOffset={4} > - -
- - - CN - -
- {user.name} - {user.email} -
-
-
- - - - - Upgrade to Pro - - - - - - - Account - - - - Billing - - - - Notifications - - - - - - Log out - + {session?.user ? ( + <> + +
+ +
+ + {currentUser.name} + + + {currentUser.email} + +
+
+
+ + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + + Log out + + + + ) : ( + + + + Log in + + + )}
); -} +};