Benjamin Sutter
da50f3b5ea
- Design tokens (ds.ts, theme.ts, scoreTheme.ts): new warm palette (#152642 navy, #f9f8f6 warm white, #e8e7e4 borders, #b8975a gold accent), flat score tier badges replacing CSS gradients, Inter + DM Serif Display typography - Card components: white-background cards, DM Serif score numbers, max-2 badge chips with +N overflow tooltip, editorial score badge positioning - Layout shell: gold left-accent nav active state, 64px top bar, outlined workspace chip, DM Serif page titles - Shared atoms: GenericBadge (outlined/solid variants), ResultFilterBar (simplified chip styles), DecisionContextPanel (dot metrics, no left accent) - Global replacement (118 files): #1e3a5f→#152642, #e2e8f0→#e8e7e4, #f4f6f9→#f9f8f6 — all handled via Node.js for proper UTF-8 safety Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Box, LinearProgress, Typography } from '@mui/material'
|
|
import { matchScoreColor } from '../../lib/utils'
|
|
|
|
const COLOR_MAP: Record<string, string> = {
|
|
success: '#1a7a4a',
|
|
warning: '#d97706',
|
|
error: '#c0392b',
|
|
}
|
|
|
|
interface ScoreBarProps {
|
|
label: string
|
|
value: number
|
|
weight?: number
|
|
color?: string
|
|
maxWidth?: number
|
|
}
|
|
|
|
export function ScoreBar({ label, value, weight, color, maxWidth = 200 }: ScoreBarProps) {
|
|
const resolved = color ?? COLOR_MAP[matchScoreColor(value)] ?? '#152642'
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', maxWidth }}>
|
|
<Typography sx={{ fontSize: '0.75rem', color: 'text.secondary', lineHeight: 1.4 }}>
|
|
{label}
|
|
</Typography>
|
|
<Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: resolved, fontVariantNumeric: 'tabular-nums', ml: 1 }}>
|
|
{value}
|
|
</Typography>
|
|
</Box>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={Math.min(value, 100)}
|
|
sx={{
|
|
height: 5,
|
|
borderRadius: 2,
|
|
maxWidth,
|
|
bgcolor: 'rgba(0,0,0,0.06)',
|
|
'& .MuiLinearProgress-bar': { bgcolor: resolved, borderRadius: 2 },
|
|
}}
|
|
/>
|
|
{weight !== undefined && (
|
|
<Typography sx={{ fontSize: '0.68rem', color: 'text.disabled', lineHeight: 1 }}>
|
|
Gewicht: {Math.round(weight * 100)}%
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|