Appheaders4

1"use client";
2 
3import { Progress } from "@/ui/progress";
4import { Badge } from "@/ui/badge";
5import { Calendar, Signal } from "@mynaui/icons-react";
6import { useEffect, useState } from "react";
7 
8export default function AppHeaders3() {
9  const progress = 13;
10  const [currentTime, setCurrentTime] = useState("");
11 
12  useEffect(() => {
13    const timer = setInterval(() => {
14      const now = new Date();
15      setCurrentTime(
16        now.toLocaleTimeString("en-US", {
17          hour: "numeric",
18          minute: "2-digit",
19          hour12: true,
20        }),
21      );
22    }, 1000);
23 
24    return () => clearInterval(timer);
25  }, []);
26 
27  return (
28    <header className="border-b bg-background px-6 py-4">
29      <div className="flex items-center justify-between">
30        <div className="space-y-1">
31          <h1 className="text-lg font-semibold">System Status</h1>
32          <p className="text-sm text-muted-foreground">
33            Monitor your system&apos;s health and performance metrics in
34            real-time
35          </p>
36        </div>
37 
38        <div className="hidden items-center gap-4 text-sm md:flex">
39          <div className="flex items-center gap-2">
40            <Calendar className="size-4 text-muted-foreground" />
41            <span className="tabular-nums">{currentTime}</span>
42          </div>
43 
44          <div className="flex items-center gap-2">
45            <Signal className="size-4 text-green-500" />
46            <Badge
47              variant="outline"
48              className="border-green-100 bg-green-50 text-green-700"
49            >
50              Connected
51            </Badge>
52          </div>
53        </div>
54      </div>
55 
56      <div className="mt-4">
57        <div className="mb-2 flex items-center justify-between text-sm">
58          <span className="text-muted-foreground">System Backup Progress</span>
59          <span className="font-medium">{progress}%</span>
60        </div>
61        <Progress value={progress} className="h-2" />
62      </div>
63    </header>
64  );
65}