first-update

easy-dataset-main/app/projects/[projectId]/blind-test-tasks/components/BlindTestHeader.js

@@ -0,0 +1,77 @@
+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>
+  );
+}