Appheaders5

1"use client";
2 
3import Logo from "@/ui/logo";
4import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
5import { Card } from "@/ui/card";
6import { Bell, Calendar, Message } from "@mynaui/icons-react";
7import { useEffect, useState } from "react";
8 
9export default function AppHeaders5() {
10  const [greeting, setGreeting] = useState("");
11 
12  useEffect(() => {
13    const hour = new Date().getHours();
14    if (hour < 12) setGreeting("Good Morning");
15    else if (hour < 18) setGreeting("Good Afternoon");
16    else setGreeting("Good Evening");
17  }, []);
18 
19  return (
20    <header className="border-b bg-background px-6 py-4">
21      <div className="flex items-center justify-between">
22        <div className="flex items-center gap-6">
23          <Logo />
24          <h1 className="hidden text-lg font-medium text-muted-foreground md:block md:text-xl">
25            {greeting},{" "}
26            <span className="font-semibold text-foreground">Praveen!</span>
27          </h1>
28        </div>
29 
30        {/* User Profile */}
31        <div className="flex items-center gap-3">
32          <div className="relative">
33            <Bell className="size-5 text-muted-foreground hover:text-foreground" />
34            <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">
35              2
36            </span>
37          </div>
38          <Avatar className="size-8">
39            <AvatarImage src="https://github.com/shadcn.png" alt="Praveen" />
40            <AvatarFallback>PJ</AvatarFallback>
41          </Avatar>
42        </div>
43      </div>
44 
45      {/* Summary Cards */}
46      <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
47        <Card className="flex items-center gap-3 p-4">
48          <div className="flex size-10 items-center justify-center rounded-full bg-blue-50">
49            <Calendar className="size-5 text-blue-600" />
50          </div>
51          <div>
52            <div className="text-sm font-medium">Tasks Due Today</div>
53            <div className="flex items-center gap-1 justify-center">
54              <span className="text-2xl font-semibold text-blue-600">3</span>
55              <span className="text-sm text-muted-foreground">tasks</span>
56            </div>
57          </div>
58        </Card>
59 
60        <Card className="flex items-center gap-3 p-4">
61          <div className="flex size-10 items-center justify-center rounded-full bg-violet-50">
62// … truncated