61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { ExternalLink, Wrench } from 'lucide-react';
|
|
import type { Tool } from '../../types';
|
|
import Badge from '../ui/Badge';
|
|
|
|
interface Props {
|
|
tool: Tool;
|
|
onEdit?: () => void;
|
|
onDelete?: () => void;
|
|
}
|
|
|
|
export default function ToolCard({ tool, onEdit, onDelete }: Props) {
|
|
return (
|
|
<div className="group bg-card border border-border rounded-xl p-5 hover:border-[var(--accent)]/40 transition-all duration-200 animate-fade-in">
|
|
<div className="flex items-start justify-between gap-3 mb-3">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
|
{tool.is_new && <Badge variant="new">New</Badge>}
|
|
<span className="text-xs text-muted">{tool.category}</span>
|
|
</div>
|
|
<h3 className="font-semibold text-white text-base leading-tight">{tool.name}</h3>
|
|
</div>
|
|
<div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 bg-[var(--accent-dim)] border border-[var(--accent)]/20">
|
|
<Wrench size={15} style={{ color: 'var(--accent)' }} />
|
|
</div>
|
|
</div>
|
|
|
|
{tool.description && (
|
|
<p className="text-sm text-muted/80 mb-3 line-clamp-3">{tool.description}</p>
|
|
)}
|
|
|
|
{tool.notes && (
|
|
<p className="text-xs text-muted/60 italic mb-3 line-clamp-2">{tool.notes}</p>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2 mt-auto pt-3 border-t border-border">
|
|
{tool.external_url && (
|
|
<a
|
|
href={tool.external_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-1.5 text-xs text-muted hover:text-white transition-colors"
|
|
>
|
|
<ExternalLink size={12} /> Open Tool
|
|
</a>
|
|
)}
|
|
<div className="flex-1" />
|
|
{onEdit && (
|
|
<button onClick={onEdit} className="text-xs text-muted hover:text-white transition-colors px-2 py-1 rounded hover:bg-white/5">
|
|
Edit
|
|
</button>
|
|
)}
|
|
{onDelete && (
|
|
<button onClick={onDelete} className="text-xs text-red-400/60 hover:text-red-400 transition-colors px-2 py-1 rounded hover:bg-red-500/5">
|
|
Delete
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|