status-monitor/ui/src/components/MetricCard.tsx

export type MetricStatus = "nil" | "good" | "warning" | "critical";

type MetricCardProps = {
    title: string;
    value: string;
    status: MetricStatus;
    subtitle?: string;
};

export function MetricCard({
    props,
    children,
}: {
    props: MetricCardProps;
    children: React.ReactNode;
}) {
    const indicateColor = getStatusColor(props.status);

    return (
        <div className="bg-[#0d0d0d] rounded-lg p-6 shadow-lg hover:shadow-xl border border-[#191919]">
            <div className="flex items-center justify-between mb-4">
                <h3 className="text-gray-300 text-sm font-medium uppercase tracking-wider">
                    {props.title}
                </h3>
                <div
                    className={`w-3 h-3 rounded-full animate-pulse-slow ${indicateColor}`}
                />
            </div>
            <div className="space-y-2">
                <div className="text-2xl font-bold text-white">
                    {props.value}
                </div>
                <div className="text-sm text-gray-500">{props.subtitle}</div>
                <div>{children}</div>
            </div>
        </div>
    );
}

const getStatusColor = (status: MetricStatus) => {
    switch (status) {
        case "nil":
            return "bg-gray-500";
        case "good":
            return "bg-green-500";
        case "warning":
            return "bg-yellow-500";
        case "critical":
            return "bg-red-500";
    }
};