App Headers

import Logo from "@/mynaui/Logo";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Bell } from "@mynaui/icons-react";

export default function Basic() {
  return (
    <header className="flex h-16 w-full shrink-0 items-center justify-between px-4 md:px-6">
      <Logo />
      <nav className="mx-auto hidden gap-6 text-sm font-medium md:flex">
        <a href="#">Dashboard</a>
        <a href="#">Analytics</a>
        <a href="#">Projects</a>
        <a href="#">Team</a>
      </nav>
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" className="rounded-full">
          <Bell className="size-5" />
          <span className="sr-only">View notifications</span>
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Avatar className="size-8">
              <AvatarImage src="/avatars/avatar-01.webp" />
              <AvatarFallback>JP</AvatarFallback>
              <span className="sr-only">Toggle user menu</span>
            </Avatar>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>My Account</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Logout</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}

import Logo from "@/mynaui/Logo";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ChevronRight, Cog, Home, Users } from "@mynaui/icons-react";

export default function AppHeaders4() {
  return (
    <header className="border-b bg-background px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-6">
          {/* App Logo */}
          <Logo />

          {/* Breadcrumbs */}
          <nav className="hidden items-center gap-2 text-sm text-muted-foreground md:flex">
            <a
              href="/"
              className="flex items-center gap-1 hover:text-foreground"
            >
              <Home className="size-4 stroke-2" />
              <span>Dashboard</span>
            </a>

            <ChevronRight className="size-3.5" />

            <a
              href="/team"
              className="flex items-center gap-1 hover:text-foreground"
            >
              <Users className="size-4 stroke-2" />
              <span>Team</span>
            </a>

            <ChevronRight className="size-3.5" />

            <a
              href="/team/settings"
              className="flex items-center gap-1 text-foreground"
            >
              <Cog className="size-4 stroke-2" />
              <span className="font-medium">Settings</span>
            </a>
          </nav>
        </div>

        {/* User Profile */}
        <div className="flex items-center gap-3">
          <div className="text-right">
            <div className="text-sm font-medium">Sarah Wilson</div>
            <div className="text-xs text-muted-foreground">Product Manager</div>
          </div>
          <Avatar className="size-8">
            <AvatarImage
              src="https://github.com/shadcn.png"
              alt="Sarah Wilson"
            />
            <AvatarFallback>SW</AvatarFallback>
          </Avatar>
        </div>
      </div>
    </header>
  );
}

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Download, Plus, Search, Upload } from "@mynaui/icons-react";

export default function AppHeaders2() {
  return (
    <header className="flex items-center justify-between gap-4 border-b bg-background px-6 py-4">
      <div className="flex items-center gap-4">
        <h1 className="text-lg font-semibold">Products</h1>
        <div className="relative hidden md:block">
          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            type="search"
            placeholder="Search products..."
            className="w-[280px] pl-9"
          />
        </div>
      </div>

      <div className="flex items-center gap-2">
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline" size="icon">
                <Upload className="size-4" />
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Import Products</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>

        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline" size="icon">
                <Download className="size-4" />
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Export Products</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>

        <Button>
          <Plus className="size-4 stroke-2" />
          Add Product
        </Button>
      </div>
    </header>
  );
}

"use client";

import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { Calendar, Signal } from "@mynaui/icons-react";
import { useEffect, useState } from "react";

export default function AppHeaders3() {
  const progress = 13;
  const [currentTime, setCurrentTime] = useState("");

  useEffect(() => {
    const timer = setInterval(() => {
      const now = new Date();
      setCurrentTime(
        now.toLocaleTimeString("en-US", {
          hour: "numeric",
          minute: "2-digit",
          hour12: true,
        }),
      );
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <header className="border-b bg-background px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="space-y-1">
          <h1 className="text-lg font-semibold">System Status</h1>
          <p className="text-sm text-muted-foreground">
            Monitor your system&apos;s health and performance metrics in
            real-time
          </p>
        </div>

        <div className="hidden items-center gap-4 text-sm md:flex">
          <div className="flex items-center gap-2">
            <Calendar className="size-4 text-muted-foreground" />
            <span className="tabular-nums">{currentTime}</span>
          </div>

          <div className="flex items-center gap-2">
            <Signal className="size-4 text-green-500" />
            <Badge
              variant="outline"
              className="border-green-100 bg-green-50 text-green-700"
            >
              Connected
            </Badge>
          </div>
        </div>
      </div>

      <div className="mt-4">
        <div className="mb-2 flex items-center justify-between text-sm">
          <span className="text-muted-foreground">System Backup Progress</span>
          <span className="font-medium">{progress}%</span>
        </div>
        <Progress value={progress} className="h-2" />
      </div>
    </header>
  );
}

"use client";

import Logo from "@/mynaui/Logo";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card } from "@/components/ui/card";
import { Bell, Calendar, Message } from "@mynaui/icons-react";
import { useEffect, useState } from "react";

export default function AppHeaders5() {
  const [greeting, setGreeting] = useState("");

  useEffect(() => {
    const hour = new Date().getHours();
    if (hour < 12) setGreeting("Good Morning");
    else if (hour < 18) setGreeting("Good Afternoon");
    else setGreeting("Good Evening");
  }, []);

  return (
    <header className="border-b bg-background px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-6">
          <Logo />
          <h1 className="hidden text-lg font-medium text-muted-foreground md:block md:text-xl">
            {greeting},{" "}
            <span className="font-semibold text-foreground">Praveen!</span>
          </h1>
        </div>

        {/* User Profile */}
        <div className="flex items-center gap-3">
          <div className="relative">
            <Bell className="size-5 text-muted-foreground hover:text-foreground" />
            <span className="absolute -top-1 right-0 flex size-3 items-center justify-center rounded-full bg-red-500 text-[8px] font-medium text-white">
              2
            </span>
          </div>
          <Avatar className="size-8">
            <AvatarImage src="https://github.com/shadcn.png" alt="Praveen" />
            <AvatarFallback>PJ</AvatarFallback>
          </Avatar>
        </div>
      </div>

      {/* Summary Cards */}
      <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
        <Card className="flex items-center gap-3 p-4">
          <div className="flex size-10 items-center justify-center rounded-full bg-blue-50">
            <Calendar className="size-5 text-blue-600" />
          </div>
          <div>
            <div className="text-sm font-medium">Tasks Due Today</div>
            <div className="flex items-center gap-1 justify-center">
              <span className="text-2xl font-semibold text-blue-600">3</span>
              <span className="text-sm text-muted-foreground">tasks</span>
            </div>
          </div>
        </Card>

        <Card className="flex items-center gap-3 p-4">
          <div className="flex size-10 items-center justify-center rounded-full bg-violet-50">
            <Message className="size-5 text-violet-600" />
          </div>
          <div>
            <div className="text-sm font-medium">New Messages</div>
            <div className="flex items-center gap-1 justify-center">
              <span className="text-2xl font-semibold text-violet-600">2</span>
              <span className="text-sm text-muted-foreground">unread</span>
            </div>
          </div>
        </Card>

        <Card className="flex items-center gap-3 p-4 sm:col-span-2 md:col-span-1">
          <div className="flex size-10 items-center justify-center rounded-full bg-orange-50">
            <Calendar className="size-5 text-orange-600" />
          </div>
          <div>
            <div className="text-sm font-medium">Upcoming Meetings</div>
            <div className="flex items-center gap-1 justify-center">
              <span className="text-2xl font-semibold text-orange-600">1</span>
              <span className="text-sm text-muted-foreground">today</span>
            </div>
          </div>
        </Card>
      </div>
    </header>
  );
}