62 lines
2.5 KiB
JavaScript
62 lines
2.5 KiB
JavaScript
import {Box, CardContent, Table, TableBody, TableCell, TableRow, Tooltip, Typography} from "@mui/material";
|
||
import React from "react";
|
||
|
||
const ChampionshipCardContent = ({champ}) => {
|
||
return (
|
||
<CardContent>
|
||
<Box
|
||
sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 2}}>
|
||
<Box>
|
||
<Typography variant="h6">
|
||
{champ.title}
|
||
</Typography>
|
||
<Tooltip title={champ.status}>
|
||
<Typography
|
||
variant="caption"
|
||
sx={{
|
||
backgroundColor: champ.status === 'Идёт' ? 'warning.main' :
|
||
champ.status === 'Регистрация открыта' ? 'success.main' : 'info.main',
|
||
color: 'white',
|
||
px: 1,
|
||
borderRadius: 1,
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{champ.status}
|
||
</Typography>
|
||
</Tooltip>
|
||
<Typography variant="subtitle2" color="text.secondary">
|
||
{champ.season}
|
||
</Typography>
|
||
</Box>
|
||
|
||
</Box>
|
||
|
||
{/* Таблица с основными данными */}
|
||
<Table size="small" sx={{mt: 2}}>
|
||
<TableBody>
|
||
<TableRow>
|
||
<TableCell variant="head">Этапы</TableCell>
|
||
<TableCell>{champ.stages}</TableCell>
|
||
</TableRow>
|
||
<TableRow>
|
||
<TableCell variant="head">Классы</TableCell>
|
||
<TableCell>
|
||
{champ.classes.join(', ')}
|
||
</TableCell>
|
||
</TableRow>
|
||
<TableRow>
|
||
<TableCell variant="head">Начало</TableCell>
|
||
<TableCell>{champ.startDate}</TableCell>
|
||
</TableRow>
|
||
<TableRow>
|
||
<TableCell variant="head">Конец</TableCell>
|
||
<TableCell>{champ.endDate}</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
</CardContent>
|
||
)
|
||
}
|
||
|
||
export default ChampionshipCardContent; |