clash-verge-rev/src/components/connection/connection-item.tsx

import dayjs from "dayjs";
import { useLockFn } from "ahooks";
import { styled, 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("span")(({ 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;
}

const ConnectionItem = (props: Props) => {
  const { value } = props;

  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={
          <>
            <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>
          </>
        }
      />
    </ListItem>
  );
};

export default ConnectionItem;