Benjamin Sutter
7f090a48ff
- Add DS_COLORS.heat, DS_COLORS.futureCard, INQUIRY_STATUS_META tokens to ds.ts - Eliminate 4 duplicate RESULT_TYPE_META / TYPE_META constants (now all use ds.ts) - Eliminate 3 duplicate scoreColor / SCORE_COLOR functions (now all use matchScoreHex) - HeatBadge: use DS_COLORS.heat.VERY_HOT / HOT tokens - FutureAvailabilityCard: use DS_COLORS.futureCard.controlled / signal tokens - IntelligenceMatchCard: import RESULT_TYPE_META from ds.ts, remove primary override - MatchScoreDisplay: replace local scoreColor() with matchScoreHex() - CompareColumnHeader: remove local TYPE_META + SCORE_COLOR, use ds.ts + utils.ts - CompareTableBody: import RESULT_TYPE_META + matchScoreHex, fix #7c3aed → token - compareUtils: remove TYPE_META + SCORE_COLOR, use dataQualityHex in scoreBar - Anfragen + AnfragenInquiryItem: deduplicate STATUS_CONFIG → INQUIRY_STATUS_META - Anfragen: #1e3a5f → 'primary.main', KI alert → futureCard.controlled tokens - AnfragenMessageBubble: own-message bubble → 'primary.main', AI bubble → tokens - ScoreBreakdownPanel: #1e3a5f → 'primary.main', #6d28d9 → futureCard.controlled - ESLint: add warn rule against new hex colors in component sx props Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { Box, Tooltip, Typography } from '@mui/material'
|
|
import { Flame } from 'lucide-react'
|
|
import { getHeatLevel, heatTooltip } from '../../lib/propertyHeat'
|
|
import { DS_COLORS } from '../../lib/ds'
|
|
|
|
interface Props {
|
|
propertyId: string | undefined
|
|
size?: 'sm' | 'md'
|
|
}
|
|
|
|
export function HeatBadge({ propertyId, size = 'md' }: Props) {
|
|
const level = getHeatLevel(propertyId)
|
|
if (!level || !propertyId) return null
|
|
|
|
const isVeryHot = level === 'VERY_HOT'
|
|
const tooltip = heatTooltip(propertyId)
|
|
const colors = isVeryHot ? DS_COLORS.heat.VERY_HOT : DS_COLORS.heat.HOT
|
|
|
|
const iconSize = size === 'sm' ? 10 : 12
|
|
const fontSize = size === 'sm' ? '0.6rem' : '0.65rem'
|
|
const label = isVeryHot ? 'Sehr gefragt' : 'Gefragt'
|
|
|
|
return (
|
|
<Tooltip title={tooltip} placement="top" arrow>
|
|
<Box
|
|
sx={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 0.35,
|
|
bgcolor: colors.bg, border: `1px solid ${colors.border}`, borderRadius: 1,
|
|
px: size === 'sm' ? 0.6 : 0.75, py: 0.15,
|
|
cursor: 'default',
|
|
}}
|
|
>
|
|
<Flame size={iconSize} color={colors.icon} fill={isVeryHot ? colors.icon : 'none'} />
|
|
<Typography sx={{ fontSize, fontWeight: 700, color: colors.text, lineHeight: 1.2 }}>
|
|
{label}
|
|
</Typography>
|
|
</Box>
|
|
</Tooltip>
|
|
)
|
|
}
|