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>
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Box, Typography } from '@mui/material'
|
|
import { CheckCircle2 } from 'lucide-react'
|
|
import type { MatchCardReason } from './MatchCardViewModel'
|
|
|
|
interface Props {
|
|
reasons: MatchCardReason[]
|
|
maxItems?: number
|
|
}
|
|
|
|
export function MatchReasonList({ reasons, maxItems = 3 }: Props) {
|
|
if (reasons.length === 0) return null
|
|
const shown = reasons.slice(0, maxItems)
|
|
|
|
return (
|
|
<Box>
|
|
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
|
|
Warum dieses Match
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
|
|
{shown.map((r, i) => (
|
|
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
|
|
<CheckCircle2 size={14} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
|
|
<Box>
|
|
<Typography variant="caption" sx={{ fontWeight: 600, color: '#1a7a4a' }}>
|
|
{r.label}
|
|
</Typography>
|
|
{r.explanation && (
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
|
|
{r.explanation}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|