Spaces:
Running
Running
File size: 2,570 Bytes
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 |
import React, { useState } from "react";
import { Typography, Grid, Box, Button } from "@mui/material";
import { alpha } from "@mui/material/styles";
import LeaderboardCard from "./LeaderboardCard";
const ITEMS_PER_PAGE = 3;
const LeaderboardSection = ({ title, leaderboards }) => {
const [showAll, setShowAll] = useState(false);
if (!leaderboards || leaderboards.length === 0) return null;
const displayedLeaderboards = showAll
? leaderboards
: leaderboards.slice(0, ITEMS_PER_PAGE);
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={() => setShowAll(!showAll)}
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
),
},
}}
>
{showAll ? "Show less" : "Show more"}
</Button>
)}
</Box>
<Grid container spacing={3}>
{displayedLeaderboards.map((leaderboard, index) => (
<Grid item xs={12} sm={6} md={4} key={index}>
<LeaderboardCard leaderboard={leaderboard} />
</Grid>
))}
</Grid>
</Box>
);
};
export default LeaderboardSection;
|