status-monitor/ui/src/pages/home.tsx

import { AgentOverviewCard } from "@/components/AgentCard";
import { Header } from "@/components/Header";
import { Box } from "lucide-react";

export function HomePage() {
    return (
        <div>
            <Header
                props={{
                    title: "Status Monitor",
                    subtitle: "Home",
                    hasBackButton: false,
                }}
            />
            <main className="max-w-7xl mx-auto py-8">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                    <AgentOverviewCard
                        props={{
                            title: "total agents",
                            icon: {
                                ref: <Box />,
                                color: "rgb(96, 165, 250)",
                                bgColor: "rgba(59, 130, 246, 0.2)",
                            },
                        }}
                    />
                    <AgentOverviewCard
                        props={{
                            title: "online",
                            icon: {
                                ref: (
                                    <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
                                ),
                                color: "rgb(34, 197, 94)",
                                bgColor: "rgba(34, 197, 94, 0.2)",
                            },
                        }}
                    />
                    <AgentOverviewCard
                        props={{
                            title: "offline",
                            icon: {
                                ref: (
                                    <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse-slow" />
                                ),
                                color: "rgb(239, 68, 68)",
                                bgColor: "rgba(239, 68, 68, 0.2)",
                            },
                        }}
                    />
                </div>

                <div className="mb-6">
                    <h2 className="text-xl font-semibold mb-4">Agents</h2>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
                </div>
            </main>
        </div>
    );
}