Spaces:
Running
Running
File size: 3,181 Bytes
518343a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import { ArrowRight } from 'lucide-react';
import { getSeverityColor } from '../../lib/command/utils';
import type { IntelligenceCard } from '../types';
interface IntelligencePanelProps {
cards: IntelligenceCard[];
}
export function IntelligencePanel({ cards }: IntelligencePanelProps) {
return (
<div className="flex flex-col gap-4">
<h2
className="text-xs font-bold tracking-widest uppercase px-1"
style={{ color: 'var(--color-fg-muted)' }}
>
AI Correlation Intelligence
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{cards.map((card) => {
const severityColor = getSeverityColor(card.severity);
return (
<div
key={card.id}
className="rounded-xl p-5 flex flex-col gap-3"
style={{
backgroundColor: 'var(--color-bg-elevated)',
border: `1px solid var(--color-surface-border)`,
borderLeftWidth: '3px',
borderLeftColor: severityColor,
}}
data-testid={`card-intelligence-${card.id}`}
>
<div className="flex items-start justify-between gap-4">
<h3
className="font-bold text-sm leading-tight"
style={{ color: 'var(--color-fg-primary)' }}
>
{card.title}
</h3>
<span
className="text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded shrink-0"
style={{
color: severityColor,
backgroundColor: `color-mix(in srgb, ${severityColor} 12%, transparent)`,
}}
>
{card.severity}
</span>
</div>
<p
className="text-xs leading-relaxed flex-1"
style={{ color: 'var(--color-fg-muted)' }}
>
{card.description}
</p>
<div className="flex flex-wrap gap-1.5">
{card.entities.map((entity) => (
<span
key={entity}
className="text-[10px] uppercase tracking-wider font-mono px-2 py-0.5 rounded"
style={{
backgroundColor: 'var(--color-surface-base)',
border: '1px solid var(--color-surface-border)',
color: 'var(--color-fg-secondary)',
}}
>
{entity}
</span>
))}
</div>
<div
className="mt-1 pt-3 flex items-center gap-2"
style={{ borderTop: '1px solid var(--color-surface-border)' }}
>
<ArrowRight className="w-3 h-3 shrink-0" style={{ color: severityColor }} />
<span className="text-xs font-medium" style={{ color: severityColor }}>
{card.action}
</span>
</div>
</div>
);
})}
</div>
</div>
);
}
|