initial design fix

2026-04-22 21:26:59 -05:00
parent 874cbfb6a8
commit 0d44d2cd90
45 changed files with 3509 additions and 84 deletions
@@ -0,0 +1,60 @@
+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>
+  );
+}