refactor: GenericBadge + Provider-Isolation
Teil A — GenericBadge:
- Neue src/components/shared/GenericBadge.tsx mit zwei Varianten:
transparent (${color}18 Hintergrund, farbiger Text, opt. Border)
solid (gefüllte Farbe, weisser Text)
- Props: label, color, variant, showBorder, bold, icon, size, tooltip, ariaLabel
- 7 Badges auf GenericBadge refactored (Config-Objekt + 1-Zeiler):
ReviewStatusBadge, ReviewPriorityBadge, ReviewEntityTypeBadge,
AIOutputStatusBadge, AIErrorBadge, MatchStatusBadge, ShortlistStatusBadge
- Barrel-Export in src/components/shared/index.ts
Teil B — Provider-Isolation:
- src/mock-data/propertyStore.ts als neutrales Daten-Modul erstellt
- MockupPropertyProvider: importiert aus mock-data statt selbst zu definieren
- MockupUnitProvider: importiert aus mock-data statt aus MockupPropertyProvider
- matchSyncService: importiert aus mock-data statt aus MockupPropertyProvider
- Kein Provider importiert mehr einen anderen Provider
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
import { Chip, Tooltip } from '@mui/material'
|
||||
import type { ReactElement } from 'react'
|
||||
|
||||
export interface GenericBadgeProps {
|
||||
label: string
|
||||
color: string
|
||||
/** transparent: semi-opaque bg (color + 18% opacity) | solid: filled bg, white text */
|
||||
variant?: 'transparent' | 'solid'
|
||||
/** Adds a 1px border at color 25% opacity (transparent variant only) */
|
||||
showBorder?: boolean
|
||||
/** fontWeight 700 instead of 600 */
|
||||
bold?: boolean
|
||||
/** Optional lucide / MUI icon element — sized by the caller */
|
||||
icon?: ReactElement
|
||||
size?: 'small' | 'medium'
|
||||
/** Wraps the badge in a Tooltip */
|
||||
tooltip?: string
|
||||
ariaLabel?: string
|
||||
}
|
||||
|
||||
export function GenericBadge({
|
||||
label,
|
||||
color,
|
||||
variant = 'transparent',
|
||||
showBorder = false,
|
||||
bold = false,
|
||||
icon,
|
||||
size = 'small',
|
||||
tooltip,
|
||||
ariaLabel,
|
||||
}: GenericBadgeProps) {
|
||||
const chip = (
|
||||
<Chip
|
||||
size={size}
|
||||
label={label}
|
||||
icon={icon}
|
||||
aria-label={ariaLabel}
|
||||
sx={{
|
||||
fontWeight: bold ? 700 : 600,
|
||||
fontSize: size === 'small' ? '0.7rem' : '0.8125rem',
|
||||
bgcolor: variant === 'solid' ? color : `${color}18`,
|
||||
color: variant === 'solid' ? 'white' : color,
|
||||
border: variant === 'transparent' && showBorder ? `1px solid ${color}40` : 'none',
|
||||
'& .MuiChip-icon': { ml: 0.5 },
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
return tooltip ? <Tooltip title={tooltip} arrow>{chip}</Tooltip> : chip
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
export { GenericBadge } from './GenericBadge'
|
||||
export type { GenericBadgeProps } from './GenericBadge'
|
||||
export { ViewToggle } from './ViewToggle'
|
||||
export { HeatBadge } from './HeatBadge'
|
||||
export { LocationPreview } from './LocationPreview'
|
||||
|
||||
Reference in New Issue
Block a user