Spaces:
Paused
Paused
| import type { ReactNode } from 'react'; | |
| import Box from '@mui/material/Box'; | |
| import Chip from '@mui/material/Chip'; | |
| import Typography from '@mui/material/Typography'; | |
| export const PRIORITY_COLORS: Record<string, string> = { | |
| CRITICAL: '#e53935', | |
| HIGH: '#fb8c00', | |
| MEDIUM: '#fdd835', | |
| LOW: '#78909c', | |
| }; | |
| export const DIFFICULTY_COLORS: Record<string, string> = { | |
| EXTREME: '#e53935', | |
| HARD: '#fb8c00', | |
| MODERATE: '#fdd835', | |
| EASY: '#66bb6a', | |
| }; | |
| export function PriorityChip({ value }: { value: string }) { | |
| return ( | |
| <Chip | |
| size="small" | |
| label={value} | |
| sx={{ | |
| bgcolor: PRIORITY_COLORS[value] ?? '#78909c', | |
| color: value === 'MEDIUM' ? '#1a1a1a' : '#fff', | |
| fontWeight: 700, | |
| fontSize: 10.5, | |
| height: 20, | |
| }} | |
| /> | |
| ); | |
| } | |
| export function DifficultyChip({ value }: { value: string }) { | |
| return ( | |
| <Chip | |
| size="small" | |
| variant="outlined" | |
| label={`difficulty ${value}`} | |
| sx={{ | |
| borderColor: DIFFICULTY_COLORS[value] ?? '#78909c', | |
| color: DIFFICULTY_COLORS[value] ?? '#78909c', | |
| fontWeight: 700, | |
| fontSize: 10.5, | |
| height: 20, | |
| }} | |
| /> | |
| ); | |
| } | |
| export function SectionLabel({ children }: { children: ReactNode }) { | |
| return ( | |
| <Typography | |
| variant="caption" | |
| sx={{ color: '#4fc3f7', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.6, display: 'block', mb: 0.5 }} | |
| > | |
| {children} | |
| </Typography> | |
| ); | |
| } | |
| /** Plain-language explainer used at the top of each view. */ | |
| export function Explainer({ children }: { children: ReactNode }) { | |
| return ( | |
| <Box | |
| sx={{ | |
| p: 1.5, | |
| bgcolor: '#141a20', | |
| border: '1px solid #232a31', | |
| borderLeft: '3px solid #4fc3f7', | |
| borderRadius: 1, | |
| mb: 2, | |
| }} | |
| > | |
| <Typography variant="body2" sx={{ color: '#aab4be', fontSize: 12.5, lineHeight: 1.6 }}> | |
| {children} | |
| </Typography> | |
| </Box> | |
| ); | |
| } | |
| export function StatChip({ label, value, color }: { label: string; value: ReactNode; color?: string }) { | |
| return ( | |
| <Chip | |
| size="small" | |
| label={ | |
| <span> | |
| <b>{value}</b> {label} | |
| </span> | |
| } | |
| sx={{ bgcolor: '#232a31', color: color ?? '#e0e6ec', fontSize: 12, height: 24 }} | |
| /> | |
| ); | |
| } | |