"use client"; import Logo from "@/components/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> ); }

App Headers