78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
import { Box, Typography, IconButton, Chip, Button } from '@mui/material';
|
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useTheme, alpha } from '@mui/material/styles';
|
|
import { blindTestStyles } from '@/styles/blindTest';
|
|
|
|
export default function BlindTestHeader({ title, status, onBack, actions }) {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const styles = blindTestStyles(theme);
|
|
|
|
const getStatusConfig = s => {
|
|
switch (s) {
|
|
case 1:
|
|
return { label: 'blindTest.statusCompleted', color: 'success' };
|
|
case 3:
|
|
return { label: 'blindTest.statusInterrupted', color: 'warning' };
|
|
default:
|
|
return { label: 'blindTest.statusProcessing', color: 'primary' };
|
|
}
|
|
};
|
|
|
|
const statusConfig = status !== undefined ? getStatusConfig(status) : null;
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
...styles.header,
|
|
bgcolor: 'background.paper',
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
px: 3,
|
|
py: 2,
|
|
mb: 3
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<IconButton onClick={onBack} size="small" sx={{ bgcolor: 'action.hover' }}>
|
|
<ArrowBackIcon />
|
|
</IconButton>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
bgcolor: alpha(theme.palette.primary.main, 0.1),
|
|
p: 1,
|
|
borderRadius: 1.5
|
|
}}
|
|
>
|
|
<CompareArrowsIcon sx={{ fontSize: 24, color: 'primary.main' }} />
|
|
</Box>
|
|
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
|
{title}
|
|
</Typography>
|
|
{statusConfig && (
|
|
<Chip
|
|
label={t(statusConfig.label)}
|
|
size="small"
|
|
sx={{
|
|
bgcolor: alpha(theme.palette[statusConfig.color].main, 0.1),
|
|
color: `${statusConfig.color}.main`,
|
|
fontWeight: 600,
|
|
border: '1px solid',
|
|
borderColor: alpha(theme.palette[statusConfig.color].main, 0.2),
|
|
height: 24
|
|
}}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
<Box>{actions}</Box>
|
|
</Box>
|
|
);
|
|
}
|