improve ui

ui/src/components/MetricCard.tsx

@@ -0,0 +1,51 @@
+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";
+    }
+};