Benjamin Sutter
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { Box, Typography } from '@mui/material'
|
|
import { Building2, Users, ArrowLeftRight } from 'lucide-react'
|
|
|
|
type EmptyContext = 'select-both' | 'no-need' | 'no-property' | 'no-match'
|
|
|
|
const META = {
|
|
'select-both': {
|
|
icon: <ArrowLeftRight size={32} color="#94a3b8" />,
|
|
title: 'Objekt und Bedarf wählen',
|
|
desc: 'Wählen Sie ein Objekt links und einen Bedarf rechts, um das Match-Briefing zu sehen.',
|
|
},
|
|
'no-need': {
|
|
icon: <Users size={32} color="#94a3b8" />,
|
|
title: 'Keinen Bedarf ausgewählt',
|
|
desc: 'Wählen Sie rechts einen Bedarf aus.',
|
|
},
|
|
'no-property': {
|
|
icon: <Building2 size={32} color="#94a3b8" />,
|
|
title: 'Kein Objekt ausgewählt',
|
|
desc: 'Wählen Sie links ein Objekt aus.',
|
|
},
|
|
'no-match': {
|
|
icon: <ArrowLeftRight size={32} color="#94a3b8" />,
|
|
title: 'Kein Match gefunden',
|
|
desc: 'Zwischen diesem Objekt und Bedarf existiert kein berechnetes Match.',
|
|
},
|
|
}
|
|
|
|
export function MatchCenterEmptyState({ context }: { context: EmptyContext }) {
|
|
const { icon, title, desc } = META[context]
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.5, py: 8, px: 3 }}>
|
|
{icon}
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 600 }} color="text.secondary">{title}</Typography>
|
|
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>{desc}</Typography>
|
|
</Box>
|
|
)
|
|
}
|