Untitled

import React, { useEffect, useState } from 'react';
import { Box, Table, Thead, Tbody, Tr, Th, Td, Text, Button } from '@chakra-ui/react';

const Leaderboard = () => {
  const [leaders, setLeaders] = useState([]);

  useEffect(() => {
    // Fetch leaderboard data from localStorage
    const storedLeaders = JSON.parse(localStorage.getItem('leaders')) || [];
    setLeaders(storedLeaders);
  }, []);

  const deleteLeader = (name) => {
    const updatedLeaders = leaders.filter(leader => leader.name !== name);
    setLeaders(updatedLeaders);
    localStorage.setItem('leaders', JSON.stringify(updatedLeaders));
  };

  return (
    <Box p={5}>
      <Text mb={4} fontSize="2xl" fontWeight="bold">Leaderboard</Text>
      <Table>
        <Thead>
          <Tr>
            <Th>Name</Th>
            <Th>Score</Th>
            <Th>Percentage</Th>
            <Th>Action</Th>
          </Tr>
        </Thead>
        <Tbody>
          {leaders.map((leader, index) => (
            <Tr key={index}>
              <Td>{leader.name}</Td>
              <Td>{leader.score}</Td>
              <Td>{((leader.score / leader.totalQuestions) * 100).toFixed(2)}%</Td>
              <Td>
                <Button colorScheme="red" onClick={() => deleteLeader(leader.name)}>Delete</Button>
              </Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </Box>
  );
};

export default Leaderboard;