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>
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import { Box, Chip, Paper, Typography } from '@mui/material'
|
||
import { MapPin, Ruler } from 'lucide-react'
|
||
import type { LatentNeed } from '../../domain/latentNeed'
|
||
import { assetTypeLabel, latentStatusBadge } from './latentNeedUtils'
|
||
|
||
interface PublicNeedCardProps {
|
||
need: LatentNeed
|
||
selected: boolean
|
||
onClick: () => void
|
||
}
|
||
|
||
export function PublicNeedCard({ need, selected, onClick }: PublicNeedCardProps) {
|
||
const statusCfg = latentStatusBadge(need.status)
|
||
return (
|
||
<Paper
|
||
onClick={onClick}
|
||
elevation={0}
|
||
sx={{
|
||
p: 1.5,
|
||
borderRadius: 1.5,
|
||
border: '1px solid',
|
||
borderColor: selected ? '#152642' : '#e8e7e4',
|
||
bgcolor: selected ? '#f1f5f9' : 'white',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.15s',
|
||
'&:hover': {
|
||
borderColor: selected ? '#152642' : '#94a3b8',
|
||
boxShadow: '0 2px 6px rgba(15,23,42,0.06)',
|
||
},
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 0.75,
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1, alignItems: 'flex-start' }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.85rem', lineHeight: 1.3 }}>
|
||
{need.title}
|
||
</Typography>
|
||
<Chip
|
||
label={statusCfg.label}
|
||
size="small"
|
||
sx={{
|
||
bgcolor: statusCfg.bg,
|
||
color: statusCfg.fg,
|
||
fontWeight: 600,
|
||
fontSize: '0.65rem',
|
||
height: 20,
|
||
}}
|
||
/>
|
||
</Box>
|
||
|
||
{need.tenantCompany && (
|
||
<Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.75rem' }}>
|
||
{need.tenantCompany}
|
||
</Typography>
|
||
)}
|
||
|
||
<Chip
|
||
label={assetTypeLabel(need.assetType)}
|
||
size="small"
|
||
sx={{
|
||
alignSelf: 'flex-start',
|
||
bgcolor: '#e0e7ff',
|
||
color: '#3730a3',
|
||
fontWeight: 600,
|
||
fontSize: '0.7rem',
|
||
height: 20,
|
||
}}
|
||
/>
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, color: '#475569', fontSize: '0.75rem' }}>
|
||
<MapPin size={12} />
|
||
<Typography variant="caption" sx={{ fontSize: '0.75rem' }}>
|
||
{need.desiredLocation}
|
||
</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, color: '#475569', fontSize: '0.75rem' }}>
|
||
<Ruler size={12} />
|
||
<Typography variant="caption" sx={{ fontSize: '0.75rem' }}>
|
||
{need.sizeRange.min}–{need.sizeRange.max} m²
|
||
</Typography>
|
||
</Box>
|
||
</Paper>
|
||
)
|
||
}
|