58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { Link } from "react-router-dom"
|
|
import { Terminal } from "lucide-react"
|
|
import type { ToolSummary } from "@/types"
|
|
import { runnerLabel } from "@/lib/labels"
|
|
|
|
interface ToolCardProps {
|
|
tool: ToolSummary
|
|
}
|
|
|
|
export function ToolCard({ tool }: ToolCardProps) {
|
|
return (
|
|
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5">
|
|
<div className="flex items-start justify-between mb-2">
|
|
<Link
|
|
to={`/component/${tool.id}`}
|
|
className="text-base font-semibold hover:text-[var(--primary)] transition-colors"
|
|
>
|
|
{tool.id}
|
|
</Link>
|
|
{tool.installed && (
|
|
<span className="text-xs px-2 py-0.5 rounded bg-green-900/30 text-green-400 border border-green-800">
|
|
installed
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{tool.description && (
|
|
<p className="text-sm text-[var(--muted)] mb-3">{tool.description}</p>
|
|
)}
|
|
|
|
<div className="flex items-center gap-3 text-xs text-[var(--muted)] mb-3">
|
|
{tool.runner && (
|
|
<span className="flex items-center gap-1">
|
|
<Terminal size={12} />
|
|
{runnerLabel(tool.runner)}
|
|
</span>
|
|
)}
|
|
{tool.version && (
|
|
<span className="font-mono">v{tool.version}</span>
|
|
)}
|
|
</div>
|
|
|
|
{tool.system_dependencies.length > 0 && (
|
|
<div className="flex flex-wrap gap-1">
|
|
{tool.system_dependencies.map((dep) => (
|
|
<span
|
|
key={dep}
|
|
className="text-xs px-2 py-0.5 rounded bg-amber-900/30 text-amber-400 border border-amber-800"
|
|
>
|
|
{dep}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|