Spaces:
Running
Running
File size: 3,152 Bytes
5470817 953a39e 5470817 953a39e 5470817 953a39e 5470817 b4d058e 953a39e 5470817 953a39e 5470817 953a39e 5470817 b4d058e 5470817 953a39e 5470817 953a39e 5470817 953a39e 5470817 953a39e 5470817 953a39e 5470817 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
import React, { useState, useEffect } from "react";
import {
Box,
CircularProgress,
Stack,
Button,
FormControlLabel,
Switch,
TextField,
InputAdornment,
Typography,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Logo from "../../components/Logo/Logo";
import PageHeader from "../../components/PageHeader/PageHeader";
import LeaderboardSection from "../../components/LeaderboardSection";
import LeaderboardFilters from "../../components/LeaderboardFilters/LeaderboardFilters";
import { alpha } from "@mui/material/styles";
import API_URLS from "../../config/api";
import {
LeaderboardProvider,
useLeaderboard,
} from "../../context/LeaderboardContext";
const LeaderboardPageContent = () => {
const [loading, setLoading] = useState(true);
const { setLeaderboards, filterLeaderboards, sections, allSections } =
useLeaderboard();
useEffect(() => {
fetch(API_URLS.leaderboards)
.then((res) => res.json())
.then((data) => {
const leaderboardsArray = Array.isArray(data)
? data
: Object.values(data).filter((item) => Array.isArray(item))[0];
setLeaderboards(leaderboardsArray);
setLoading(false);
})
.catch((error) => {
console.error("Error fetching leaderboards:", error);
setLoading(false);
});
}, [setLeaderboards]);
return (
<Box
sx={{
width: "100%",
ph: 2,
display: "flex",
flexDirection: "column",
}}
>
<Box
sx={{ display: "flex", justifyContent: "center", pt: 6, mb: -4, pb: 0 }}
>
<Logo />
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
textAlign: "center",
mb: 0,
mt: 6,
gap: 2,
}}
>
<Typography fontWeight="bold" variant="h3" component="h1">
Leaderboards on the Hub
</Typography>
<Typography variant="h6" color="text.secondary">
<span style={{ fontWeight: 600 }}>Discover</span> and{" "}
<span style={{ fontWeight: 600 }}>explore</span> all leaderboards from
the <span style={{ fontWeight: 600 }}>Hugging Face community</span>
</Typography>
</Box>
{loading ? (
<Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
<CircularProgress />
</Box>
) : (
<Box
sx={{
width: "100%",
maxWidth: "1200px",
mx: "auto",
mt: 4,
}}
>
<LeaderboardFilters allSections={allSections} />
{sections.map(({ id, title, data }) => (
<Box key={id} id={id}>
<LeaderboardSection
title={title}
leaderboards={filterLeaderboards(data)}
/>
</Box>
))}
</Box>
)}
</Box>
);
};
const LeaderboardPage = () => {
return (
<LeaderboardProvider>
<LeaderboardPageContent />
</LeaderboardProvider>
);
};
export default LeaderboardPage;
|