51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { Check, X, Clock } from 'lucide-react'
|
|
import type { AISuggestion } from '@/types'
|
|
|
|
interface SuggestionsTabProps {
|
|
suggestions: AISuggestion[]
|
|
}
|
|
|
|
const STATUS_CONFIG = {
|
|
accepted: { icon: Check, color: 'text-emerald-400', label: 'Accepted' },
|
|
dismissed: { icon: X, color: 'text-rose-400', label: 'Dismissed' },
|
|
pending: { icon: Clock, color: 'text-amber-400', label: 'Pending' },
|
|
} as const
|
|
|
|
export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
|
|
if (suggestions.length === 0) {
|
|
return (
|
|
<div className="flex flex-1 items-center justify-center text-sm text-muted-foreground p-6">
|
|
No AI suggestions yet
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 overflow-y-auto px-3 py-3 space-y-2">
|
|
{suggestions.map((s) => {
|
|
const config = STATUS_CONFIG[s.status]
|
|
const StatusIcon = config.icon
|
|
return (
|
|
<div key={s.id} className="rounded-lg border border-border bg-[rgba(255,255,255,0.02)] px-3 py-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
|
{s.action_type.replace(/_/g, ' ')}
|
|
</span>
|
|
<span className={`flex items-center gap-1 text-xs ${config.color}`}>
|
|
<StatusIcon className="h-3 w-3" />
|
|
{config.label}
|
|
</span>
|
|
</div>
|
|
{s.target_node_id && (
|
|
<p className="mt-1 text-xs text-muted-foreground truncate">Node: {s.target_node_id}</p>
|
|
)}
|
|
<p className="mt-0.5 font-label text-[0.625rem] text-[#5a6170]">
|
|
{new Date(s.created_at).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|