Benjamin Sutter
ea221def74
- MatchCardViewModel: typed view model decoupling card from raw API data - Sub-components: MatchCardHeader, MatchScoreDisplay, MatchReasonList, TradeoffList, MatchDataQualitySummary, MatchActionToolbar, MatchCardSkeleton, MatchCardRestrictedState - 4 variants: MatchCardCompact, MatchCardExpanded, MatchCardReview, MatchCardCompareMini - MatchCard: main entry point with variant prop - matchCardAdapter: buildMatchCardViewModel() converts UnifiedMatchResult -> ViewModel - UnifiedResultCard: now thin wrapper using MatchCardCompact via adapter - FUTURE_AVAILABILITY always shows non-dismissable disclaimer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { Box, Typography } from '@mui/material'
|
|
import { ArrowLeftRight } from 'lucide-react'
|
|
import type { TradeOff } from '../../domain/match'
|
|
|
|
function severityColor(severity: TradeOff['severity']): string {
|
|
if (severity === 'HIGH') return '#d97706'
|
|
if (severity === 'MEDIUM') return '#92400e'
|
|
return '#64748b'
|
|
}
|
|
|
|
interface Props {
|
|
tradeoffs: TradeOff[]
|
|
maxItems?: number
|
|
compact?: boolean
|
|
}
|
|
|
|
export function TradeoffList({ tradeoffs, maxItems = 3, compact }: Props) {
|
|
if (tradeoffs.length === 0) return null
|
|
const shown = tradeoffs.slice(0, maxItems)
|
|
|
|
return (
|
|
<Box>
|
|
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
|
|
Abwägungen
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
|
{shown.map((t, i) => (
|
|
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
|
|
<ArrowLeftRight size={14} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
|
|
<Box>
|
|
{compact ? (
|
|
<Typography variant="caption" sx={{ color: severityColor(t.severity) }}>
|
|
{t.concern}
|
|
</Typography>
|
|
) : (
|
|
<>
|
|
<Typography variant="caption" sx={{ fontWeight: 600, color: severityColor(t.severity) }}>
|
|
{t.criterion}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
|
|
{t.concern}
|
|
</Typography>
|
|
{t.mitigation && (
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontStyle: 'italic' }}>
|
|
→ {t.mitigation}
|
|
</Typography>
|
|
)}
|
|
</>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|