text: import './style.css';
  import React from 'react';
  
  const SpeedtestList = ({ }) => (
    <div>
      <div className="ui-speedtest-network-main">
        <div className="ui-speedtest-network-name">
          <p>CloudHouse Fiberwave 300Mbit</p>
        </div>
        <div className="ui-speedtest-network-info">
          <div className="info-download-wrapper">
            <div className="info-image-wrapper">
              <img className="info-image" src={require('../../../assets/images/download-gray.png')} alt="" />
            </div>
            <div className="info-text">
              <p>24 Mbit</p>
            </div>
          </div>
          <div className="info-upload-wrapper">
            <div className="info-image-wrapper">
              <img className="info-image" src={require('../../../assets/images/upload-gray.png')} alt="" />
            </div>
            <div className="info-text">
              <p>4 Mbit</p>
            </div>
          </div>
          <div className="info-cap-wrapper">
            <div className="info-text">
              <p>Data Cap: 1000 GB</p>
            </div>
          </div>
        </div>
      </div>
      <div className="ui-list-agent-note">
        <div className="agent-note-image-wrapper">
          <img className="agent-note-image" src={require('../../../assets/images/headphone-gray.png')} alt="" />
        </div>
        <div className="agent-note-text">
          <p>Speed test run by agent are not visible for subscriber in subscriber app.</p>
        </div>
      </div>
      <ul className="ui-speedtest-list ui-multi-list">
        <li>
          <div className="ui-speedtest-date">
            <p>Tuesday, 01/13</p>
          </div>
          <div>
            <div className="ui-speedtest-info">
              <div className="ui-new-box">
                <p>NEW</p>
              </div>
              <div className="ui-speedtest-time">
                <p>8:15 am</p>
              </div>
              <div className="ui-speedtest-icon-wrapper">
                <img className="ui-speedtest-icon" src={require('../../../assets/images/headphone-gray.png')} alt="" />
              </div>
              <div className="ui-speedtest-progress-green">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '42%' }} className="ui-speedtest-green-fill">
                  </div>
                </div>
              </div>
              <div className="ui-speedtest-progress-blue">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '78%' }} className="ui-speedtest-blue-fill">
                  </div>
                </div>
              </div>
            </div>
            <div className="ui-speedtest-info">
              <div className="ui-new-box">
                <p>NEW</p>
              </div>
              <div className="ui-speedtest-time">
                <p>8:15 am</p>
              </div>
              <div className="ui-speedtest-icon-wrapper">
                <img className="ui-speedtest-icon" src={require('../../../assets/images/headphone-gray.png')} alt="" />
              </div>
              <div className="ui-speedtest-progress-green">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '42%' }} className="ui-speedtest-green-fill">
                  </div>
                </div>
              </div>
              <div className="ui-speedtest-progress-blue">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '78%' }} className="ui-speedtest-blue-fill">
                  </div>
                </div>
              </div>
            </div>
  
            <div className="ui-speedtest-info">
              <div className="ui-new-box">
                <p>NEW</p>
              </div>
              <div className="ui-speedtest-time">
                <p>8:15 am</p>
              </div>
              <div className="ui-speedtest-icon-wrapper">
                <img className="ui-speedtest-icon" src={require('../../../assets/images/headphone-gray.png')} alt="" />
              </div>
              <div className="ui-speedtest-progress-green">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '42%' }} className="ui-speedtest-green-fill">
                  </div>
                </div>
              </div>
              <div className="ui-speedtest-progress-blue">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '78%' }} className="ui-speedtest-blue-fill">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
  
  
  
  
  
  
        <li>
          <div className="ui-speedtest-date">
            <p>Tuesday, 01/13</p>
          </div>
          <div>
            <div className="ui-speedtest-info">
              <div className="ui-new-box">
                <p>NEW</p>
              </div>
              <div className="ui-speedtest-time">
                <p>8:15 am</p>
              </div>
              <div className="ui-speedtest-icon-wrapper">
                <img className="ui-speedtest-icon" src={require('../../../assets/images/headphone-gray.png')} alt="" />
              </div>
              <div className="ui-speedtest-progress-green">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '42%' }} className="ui-speedtest-green-fill">
                  </div>
                </div>
              </div>
              <div className="ui-speedtest-progress-blue">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '78%' }} className="ui-speedtest-blue-fill">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
  
  
        <li>
          <div className="ui-speedtest-date">
            <p>Tuesday, 01/13</p>
          </div>
          <div>
            <div className="ui-speedtest-info">
              <div className="ui-new-box">
                <p>NEW</p>
              </div>
              <div className="ui-speedtest-time">
                <p>8:15 am</p>
              </div>
              <div className="ui-speedtest-icon-wrapper">
                <img className="ui-speedtest-icon" src={require('../../../assets/images/headphone-gray.png')} alt="" />
              </div>
              <div className="ui-speedtest-progress-green">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '42%' }} className="ui-speedtest-green-fill">
                  </div>
                </div>
              </div>
              <div className="ui-speedtest-progress-blue">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '78%' }} className="ui-speedtest-blue-fill">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
  
  
        <li>
          <div className="ui-speedtest-date">
            <p>Tuesday, 01/13</p>
          </div>
          <div>
            <div className="ui-speedtest-info">
              <div className="ui-new-box">
                <p>NEW</p>
              </div>
              <div className="ui-speedtest-time">
                <p>8:15 am</p>
              </div>
              <div className="ui-speedtest-icon-wrapper">
                <img className="ui-speedtest-icon" src={require('../../../assets/images/headphone-gray.png')} alt="" />
              </div>
              <div className="ui-speedtest-progress-green">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '42%' }} className="ui-speedtest-green-fill">
                  </div>
                </div>
              </div>
              <div className="ui-speedtest-progress-blue">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '78%' }} className="ui-speedtest-blue-fill">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
  
  
        <li>
          <div className="ui-speedtest-date">
            <p>Tuesday, 01/13</p>
          </div>
          <div>
            <div className="ui-speedtest-info">
              <div className="ui-new-box">
                <p>NEW</p>
              </div>
              <div className="ui-speedtest-time">
                <p>8:15 am</p>
              </div>
              <div className="ui-speedtest-icon-wrapper">
                <img className="ui-speedtest-icon" src={require('../../../assets/images/headphone-gray.png')} alt="" />
              </div>
              <div className="ui-speedtest-progress-green">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '42%' }} className="ui-speedtest-green-fill">
                  </div>
                </div>
              </div>
              <div className="ui-speedtest-progress-blue">
                <div className="ui-speedtest-progress-meter">
                  <div style={{ width: '78%' }} className="ui-speedtest-blue-fill">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  )
  
  export default SpeedtestList;