feat: connections page simply support

src/components/connection/connection-item.tsx

@@ -1,4 +1,20 @@
+import dayjs from "dayjs";
+import { useLockFn } from "ahooks";
+import { styled, Box, ListItem, IconButton, ListItemText } from "@mui/material";
+import { CloseRounded } from "@mui/icons-material";
 import { ApiType } from "../../services/types";
+import { deleteConnection } from "../../services/api";
+
+const Tag = styled(Box)(({ theme }) => ({
+  display: "inline-block",
+  fontSize: "12px",
+  padding: "0 4px",
+  lineHeight: 1.375,
+  border: "1px solid #ccc",
+  borderRadius: 4,
+  marginRight: "0.1em",
+  transform: "scale(0.92)",
+}));
 
 interface Props {
   value: ApiType.ConnectionsItem;
@@ -7,7 +23,34 @@ interface Props {
 const ConnectionItem = (props: Props) => {
   const { value } = props;
 
-  return <div>{value.metadata.host || value.metadata.destinationIP}</div>;
+  const onDelete = useLockFn(async () => deleteConnection(value.id));
+
+  return (
+    <ListItem
+      dense
+      secondaryAction={
+        <IconButton edge="end" onClick={onDelete}>
+          <CloseRounded />
+        </IconButton>
+      }
+    >
+      <ListItemText
+        primary={value.metadata.host || value.metadata.destinationIP}
+        secondary={
+          <Box>
+            <Tag sx={{ textTransform: "uppercase", color: "success" }}>
+              {value.metadata.network}
+            </Tag>
+            <Tag>{value.metadata.type}</Tag>
+            {value.chains.length > 0 && (
+              <Tag>{value.chains[value.chains.length - 1]}</Tag>
+            )}
+            <Tag>{dayjs(value.start).fromNow()}</Tag>
+          </Box>
+        }
+      />
+    </ListItem>
+  );
 };
 
 export default ConnectionItem;