bs-p2/app/components/TopPerformers.tsx

let performersData = [
    {
      id: "1",
      name: "Eiden",
      score: "48/50",
      points: "999",
      rank: "1",
      program: "Graduate Program",
      avatar: "avatar1.png"
    },
    {
      id: "2",
      name: "Jackson",
      score: "45/50",
      points: "997",
      rank: "2",
      program: "Graduate Program",
      avatar: "avatar2.png"
    },
    {
      id: "3",
      name: "Emma Aria",
      score: "43/50",
      points: "994",
      rank: "3",
      program: "Graduate Program",
      avatar: "avatar3.png"
    },
    {
      id: "4",
      name: "John Doe",
      score: "40/50",
      points: "990",
      rank: "4",
      program: "Graduate Program",
      avatar: "avatar4.png"
    },
    {
      id: "5",
      name: "Jane Cooper",
      score: "37/50",
      points: "987",
      rank: "5",
      program: "Graduate Program",
      avatar: "avatar5.png"
    },
    {
      id: "6",
      name: "John Doe",
      score: "35/50",
      points: "982",
      rank: "6",
      program: "Graduate Program",
      avatar: "avatar6.png"
    }
];  

const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));

const highestRank = sortedData[0];
const secondHighestRank = sortedData[1];
const thirdHighestRank = sortedData[2];

// console.log('The highest rank is:', highestRank);
// console.log('The second highest rank is:', secondHighestRank);
// console.log('The Third highest rank is:', thirdHighestRank);


export default function(){
    return(
        <div className=''>
            <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
            <p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
            <div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
                <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
                        <img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
                        <img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
                    </div>
                    <p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
                    <p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
                </div>
                <div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
                        <img className='-mt-10' src="../../assets/crown.png" alt="" />
                        <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
                        <img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
                    </div>
                    <p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
                    <p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
                </div>
                <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
                        <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
                        <img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
                    </div>
                    <p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
                    <p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
                </div>
            </div>
            <div className='flex flex-col'>
                {sortedData.slice(3).map(data => (
                    <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
                        <p className='text-[11px] font-[700]'># {data.rank}</p>
                        <img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
                        <div>
                            <p className='text-[14px] font-[700]'>{data.name}</p>
                            <p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
                        </div>
                        <div className='flex flex-col justify-center place-items-center'>
                            <img src="../../assets/points-icon.svg" alt="" />
                            <p className='text-[10px] font-[700]'>{data.points} Points</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}