const RenderAppList = ({ list }) => {
  return (
    <CustomTable
      margin="1rem 0 0 0"
      cellWidth="300px"
      cellPadding="10px 20px"
      aria-label="My Applications"
    >
      <thead>
        <tr>
          <CustomTableCell align="right" scope="col">
            Name
          </CustomTableCell>

          <CustomTableCell scope="col">URL/Domain</CustomTableCell>
        </tr>
      </thead>

      <tbody>
        {list.map((elem) => {
          const { id, name, homeUrl } = elem;

          return (
            <tr key={id}>
              <CustomTableCell align="left">
                <StyledLink to={`applications/${id}`}>{name}</StyledLink>
              </CustomTableCell>

              <td>
                <StyledLink to={`applications/${id}`}>{homeUrl}</StyledLink>
              </td>
            </tr>
          );
        })}
      </tbody>
    </CustomTable>
  );
};