Website (14 monoliths split): - compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20) - quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11) - i18n.ts (1,173 → 8 language files) - unity-bridge (1,094 → 12), backlog (1,087 → 6) - training (1,066 → 8), rag (1,063 → 8) - Deleted index_original.ts (4,899 LOC dead backup) Studio-v2 (5 monoliths split): - meet/page.tsx (1,481 → 9), messages (1,166 → 9) - AlertsB2BContext.tsx (1,165 → 5 modules) - alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6) All existing imports preserved. Zero new TypeScript errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
'use client'
|
||
|
||
import { useTheme } from '@/lib/ThemeContext'
|
||
import type { B2BHit } from '@/lib/AlertsB2BContext'
|
||
import { getImportanceLabelColor, getDecisionLabelColor, formatDeadline } from '@/lib/AlertsB2BContext'
|
||
|
||
export function HitCard({
|
||
hit,
|
||
onClick
|
||
}: {
|
||
hit: B2BHit
|
||
onClick: () => void
|
||
}) {
|
||
const { isDark } = useTheme()
|
||
|
||
return (
|
||
<button
|
||
onClick={onClick}
|
||
className={`w-full text-left p-4 rounded-xl transition-all group ${
|
||
isDark
|
||
? `bg-white/5 hover:bg-white/10 ${!hit.isRead ? 'border-l-4 border-amber-500' : ''}`
|
||
: `bg-slate-50 hover:bg-slate-100 ${!hit.isRead ? 'border-l-4 border-amber-500' : ''}`
|
||
}`}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium border ${getImportanceLabelColor(hit.importanceLabel, isDark)}`}>
|
||
{hit.importanceLabel}
|
||
</span>
|
||
<span className={`px-2 py-0.5 rounded-lg text-xs ${getDecisionLabelColor(hit.decisionLabel, isDark)}`}>
|
||
{hit.decisionLabel === 'relevant' ? 'Relevant' : hit.decisionLabel === 'needs_review' ? 'Pruefung' : 'Info'}
|
||
</span>
|
||
{hit.deadlineGuess && (
|
||
<span className={`text-xs ${
|
||
formatDeadline(hit.deadlineGuess).includes('Heute') || formatDeadline(hit.deadlineGuess).includes('Morgen')
|
||
? 'text-red-500 font-medium'
|
||
: isDark ? 'text-white/40' : 'text-slate-400'
|
||
}`}>
|
||
📅 {formatDeadline(hit.deadlineGuess)}
|
||
</span>
|
||
)}
|
||
{!hit.isRead && (
|
||
<span className="w-2 h-2 rounded-full bg-amber-500" />
|
||
)}
|
||
</div>
|
||
<h3 className={`font-medium text-sm mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
{hit.title}
|
||
</h3>
|
||
<p className={`text-xs truncate ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||
{hit.snippet}
|
||
</p>
|
||
<div className={`flex items-center gap-3 mt-2 text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||
{hit.buyerGuess && <span>🏛️ {hit.buyerGuess}</span>}
|
||
{hit.countryGuess && <span>🌍 {hit.countryGuess}</span>}
|
||
</div>
|
||
</div>
|
||
<svg className={`w-5 h-5 flex-shrink-0 transition-colors ${
|
||
isDark ? 'text-white/30 group-hover:text-white/60' : 'text-slate-300 group-hover:text-slate-600'
|
||
}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
)
|
||
}
|