+ {networkData.interfaces.map((interface_, index) => {
+ const typeBadge = getInterfaceTypeBadge(interface_.type)
+
+ return (
+
setSelectedInterface(interface_)}
+ >
+ {/* First row: Icon, Name, Type Badge, Status */}
+
+
+
+
{interface_.name}
+
+ {typeBadge.label}
+
+
+
+ {interface_.status.toUpperCase()}
+
+
+
+ {/* Second row: Details - Responsive layout */}
+
+
+
IP Address
+
+ {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
+
+
+
+
+
Speed
+
+
+ {formatSpeed(interface_.speed)}
+
+
+
+
+
Traffic
+
+ ↓ {formatBytes(interface_.bytes_recv)}
+ {" / "}
+ ↑ {formatBytes(interface_.bytes_sent)}
+
+
+
+ {interface_.mac_address && (
+
+
MAC
+
+ {interface_.mac_address}
+
+
+ )}
+
+