Add better error page

proxy/web/src/components/ConnectionLine.tsx

@@ -0,0 +1,26 @@
+import { X } from "lucide-react";
+
+interface ConnectionLineProps {
+  success?: boolean;
+}
+
+export function ConnectionLine({ success = true }: ConnectionLineProps) {
+  if (success) {
+    return (
+      <div className="flex-1 flex items-center justify-center h-12 w-full px-5">
+        <div className="w-full border-t-2 border-dashed border-green-500" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex items-center justify-center h-12 min-w-10 px-5 relative">
+      <div className="w-full border-t-2 border-dashed border-nb-gray-900" />
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="w-8 h-8 rounded-full flex items-center justify-center">
+          <X size={18} className="text-netbird" />
+        </div>
+      </div>
+    </div>
+  );
+}

proxy/web/src/components/StatusCard.tsx

@@ -0,0 +1,38 @@
+import type { LucideIcon } from "lucide-react";
+import { ConnectionLine } from "./ConnectionLine";
+
+interface StatusCardProps {
+  icon: LucideIcon;
+  label: string;
+  detail?: string;
+  success?: boolean;
+  line?: boolean;
+}
+
+export function StatusCard({
+  icon: Icon,
+  label,
+  detail,
+  success = true,
+  line = true,
+}: StatusCardProps) {
+  return (
+    <>
+      {line && <ConnectionLine success={success} />}
+      <div className="flex flex-col items-center gap-2">
+        <div className="w-14 h-14 rounded-md flex items-center justify-center from-nb-gray-940 to-nb-gray-930/70 bg-gradient-to-br border border-nb-gray-910">
+          <Icon size={20} className="text-nb-gray-200" />
+        </div>
+        <span className="text-sm text-nb-gray-200 font-normal mt-1">{label}</span>
+        <span className={`text-xs font-medium uppercase ${success ? "text-green-500" : "text-netbird"}`}>
+          {success ? "Connected" : "Unreachable"}
+        </span>
+        {detail && (
+          <span className="text-xs text-nb-gray-400 truncate text-center">
+            {detail}
+          </span>
+        )}
+      </div>
+    </>
+  );
+}