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

export type AgentOverviewCardProps = {
    title: string;
    icon: {
        ref: React.ReactNode;
        color: string;
        bgColor: string;
    };
};

export function AgentOverviewCard({
    props,
}: {
    props: AgentOverviewCardProps;
}) {
    return (
        <div className="bg-[#111111] border border-[#262626] rounded-lg p-6">
            <div className="flex items-center justify-between">
                <div>
                    <p className="text-sm text-gray-400 uppercase tracking-wider">
                        {props.title}
                    </p>
                    <p className="text-2xl font-bold text-white">0</p>
                </div>
                <div
                    className="w-12 h-12 rounded-lg flex items-center justify-center"
                    style={{
                        color: props.icon.color,
                        backgroundColor: props.icon.bgColor,
                    }}
                >
                    {props.icon.ref}
                </div>
            </div>
        </div>
    );
}