Spaces:
Running
Running
File size: 3,499 Bytes
5470817 953a39e 5470817 953a39e 5470817 953a39e 5470817 953a39e 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 |
import React, { useState } from "react";
import { Typography, Grid, Box, Button, Collapse } from "@mui/material";
import { alpha } from "@mui/material/styles";
import LeaderboardCard from "./LeaderboardCard";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
const ITEMS_PER_PAGE = 3;
const LeaderboardSection = ({ title, leaderboards }) => {
const [showAll, setShowAll] = useState(false);
const [expanded, setExpanded] = useState(false);
if (!leaderboards || leaderboards.length === 0) return null;
const displayedLeaderboards = showAll
? leaderboards
: leaderboards.slice(0, ITEMS_PER_PAGE);
const toggleExpanded = () => {
setShowAll(!showAll);
setExpanded(!expanded);
};
return (
<Box sx={{ mb: 6 }}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
mb: 4,
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography
variant="h4"
sx={{
color: "text.primary",
fontWeight: 600,
fontSize: { xs: "1.5rem", md: "2rem" },
}}
>
{title}
</Typography>
<Box
sx={(theme) => ({
width: "4px",
height: "4px",
borderRadius: "100%",
backgroundColor: alpha(
theme.palette.text.primary,
theme.palette.mode === "dark" ? 0.2 : 0.15
),
})}
/>
<Typography
variant="h4"
sx={{
color: "text.secondary",
fontWeight: 400,
fontSize: { xs: "1.25rem", md: "1.5rem" },
}}
>
{leaderboards.length}
</Typography>
</Box>
{leaderboards.length > ITEMS_PER_PAGE && (
<Button
onClick={toggleExpanded}
size="small"
sx={{
color: "text.secondary",
fontSize: "0.875rem",
textTransform: "none",
"&:hover": {
backgroundColor: (theme) =>
alpha(
theme.palette.text.primary,
theme.palette.mode === "dark" ? 0.1 : 0.06
),
},
}}
endIcon={
<ExpandMoreIcon
sx={{
transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
transition: "transform 300ms",
}}
/>
}
>
{expanded ? "Show less" : "Show more"}
</Button>
)}
</Box>
<Grid container spacing={3}>
{leaderboards.slice(0, ITEMS_PER_PAGE).map((leaderboard, index) => (
<Grid item xs={12} sm={6} md={4} key={index}>
<LeaderboardCard leaderboard={leaderboard} />
</Grid>
))}
</Grid>
<Collapse in={showAll} timeout={300}>
<Grid container spacing={3} sx={{ mt: 0 }}>
{leaderboards.slice(ITEMS_PER_PAGE).map((leaderboard, index) => (
<Grid item xs={12} sm={6} md={4} key={index + ITEMS_PER_PAGE}>
<LeaderboardCard leaderboard={leaderboard} />
</Grid>
))}
</Grid>
</Collapse>
</Box>
);
};
export default LeaderboardSection;
|