Benjamin Sutter
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { Box, Button, Card, CardContent, Typography } from '@mui/material'
|
|
import type { StrongMatchItem } from '../../domain/dashboard'
|
|
import { StrongMatchMiniCard } from './StrongMatchMiniCard'
|
|
|
|
interface StrongMatchOverviewProps {
|
|
matches: StrongMatchItem[]
|
|
onNavigate: () => void
|
|
}
|
|
|
|
export function StrongMatchOverview({ matches, onNavigate }: StrongMatchOverviewProps) {
|
|
return (
|
|
<Card>
|
|
<CardContent sx={{ p: 2.5 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
|
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
|
Starke Matches
|
|
</Typography>
|
|
<Button size="small" onClick={onNavigate}>
|
|
Alle anzeigen
|
|
</Button>
|
|
</Box>
|
|
|
|
{matches.length === 0 ? (
|
|
<Typography variant="body2" sx={{ color: 'text.secondary', py: 2, textAlign: 'center' }}>
|
|
Keine starken Matches vorhanden.
|
|
</Typography>
|
|
) : (
|
|
matches.slice(0, 5).map(m => (
|
|
<StrongMatchMiniCard key={m.matchId} match={m} />
|
|
))
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|