import React, { useEffect, useState } from 'react'; interface Performer { id: number; name: string; rank: number; avatar: string; score: number; program: string; points: number; } export default function TopPerformers() { const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('https://api.teachertrainingkolkata.in//api/top-performers') .then(res => { if (!res.ok) { throw new Error('Network response was not ok'); } return res.json(); }) .then(data => { // console.log(data) const sortedData: Performer[] = data.sort((a: Performer, b: Performer) => a.rank - b.rank); setData(sortedData); setLoading(false); }) .catch(error => { console.error('Error fetching data:', error); setError(error); setLoading(false); }); }, []); if (loading) { return

; } if (error) { return

Error: {error.message}

; } const [highestRank, secondHighestRank, thirdHighestRank, ...sortedData] = data; return (