import React, { useEffect, useState } from 'react';
import {Skeleton} from 'antd';

function Ranking({data}){
  const [list ,setList ]= useState([]);
  
  useEffect(()=>{
    setList(data);
  },[data])

  return(
    <div className="arrayList">
      {
        list && list.length >0?
        <ul>
          {
            list.map((i,k)=>{
              return(
                <li>
                  <span className="index">{i.no}</span>
                  <p className="name task-hide">{i.project_full_name}</p>
                  <span className="num">{i.commits}</span>
                </li>
              )
            })
          }
        </ul>
        :<Skeleton />
      }
    </div>
  )
}
export default Ranking;