File size: 2,259 Bytes
921d377 | 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 | import React from 'react';
import { Wrench, Bot } from 'lucide-react';
import { computeBadges } from './toolBadges';
import { ToolStatusBadge } from './ToolStatusBadge';
export function ToolCard({ item, onClick }) {
const { kind, data } = item;
const isA2A = kind === 'a2a_agent';
const toolUrl = kind === 'tool' ? data.url : undefined;
const badges = computeBadges(data.name, data.description || '', isA2A ? 'A2A' : undefined, toolUrl);
const Icon = isA2A ? Bot : Wrench;
const gradientFrom = isA2A ? 'from-violet-500/20' : 'from-cyan-500/20';
const gradientTo = isA2A ? 'to-purple-500/20' : 'to-blue-500/20';
const iconColor = isA2A ? 'text-violet-400' : 'text-cyan-400';
return (<div onClick={onClick} className="flex flex-col gap-3 p-5 rounded-2xl bg-white/5 hover:bg-white/10 transition-all duration-200 cursor-pointer border border-white/10 hover:border-white/20 h-full group">
{/* Header */}
<div className="flex justify-between items-start gap-3">
<div className="flex items-center gap-3 min-w-0">
<div className={`w-10 h-10 shrink-0 rounded-xl bg-gradient-to-br ${gradientFrom} ${gradientTo} border border-white/10 flex items-center justify-center ${iconColor}`}>
<Icon size={18} strokeWidth={2}/>
</div>
<div className="min-w-0">
<h3 className="font-semibold text-sm text-white truncate">{data.name}</h3>
<ToolStatusBadge enabled={data.enabled}/>
</div>
</div>
{/* Type chip */}
<span className={`shrink-0 text-[10px] px-2 py-0.5 rounded-full font-semibold uppercase tracking-wide ${isA2A
? 'bg-violet-500/20 text-violet-300'
: 'bg-blue-500/20 text-blue-300'}`}>
{isA2A ? 'A2A' : 'Tool'}
</span>
</div>
{/* Description */}
<p className="text-sm text-white/60 leading-relaxed line-clamp-2 flex-1">
{data.description || 'No description available'}
</p>
{/* Badges */}
<div className="flex flex-wrap gap-1.5">
{badges.map((b) => (<span key={b.label} className={`text-xs px-2 py-0.5 rounded-full font-medium ${b.bg} ${b.color}`}>
{b.label}
</span>))}
</div>
</div>);
}
|