Appheaders2

1import Logo from "@/ui/logo";
2import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
3import { ChevronRight, Cog, Home, Users } from "@mynaui/icons-react";
4 
5export default function AppHeaders4() {
6  return (
7    <header className="border-b bg-background px-6 py-4">
8      <div className="flex items-center justify-between">
9        <div className="flex items-center gap-6">
10          {/* App Logo */}
11          <Logo />
12 
13          {/* Breadcrumbs */}
14          <nav className="hidden items-center gap-2 text-sm text-muted-foreground md:flex">
15            <a
16              href="/"
17              className="flex items-center gap-1 hover:text-foreground"
18            >
19              <Home className="size-4 stroke-2" />
20              <span>Dashboard</span>
21            </a>
22 
23            <ChevronRight className="size-3.5" />
24 
25            <a
26              href="/team"
27              className="flex items-center gap-1 hover:text-foreground"
28            >
29              <Users className="size-4 stroke-2" />
30              <span>Team</span>
31            </a>
32 
33            <ChevronRight className="size-3.5" />
34 
35            <a
36              href="/team/settings"
37              className="flex items-center gap-1 text-foreground"
38            >
39              <Cog className="size-4 stroke-2" />
40              <span className="font-medium">Settings</span>
41            </a>
42          </nav>
43        </div>
44 
45        {/* User Profile */}
46        <div className="flex items-center gap-3">
47          <div className="text-right">
48            <div className="text-sm font-medium">Sarah Wilson</div>
49            <div className="text-xs text-muted-foreground">Product Manager</div>
50          </div>
51          <Avatar className="size-8">
52            <AvatarImage
53              src="https://github.com/shadcn.png"
54              alt="Sarah Wilson"
55            />
56            <AvatarFallback>SW</AvatarFallback>
57          </Avatar>
58        </div>
59      </div>
60    </header>
61  );
62}