Upload components/KnowledgeArticle.js with huggingface_hub

components/KnowledgeArticle.js

@@ -0,0 +1,60 @@
+import { FileText, Tag, Clock, Calendar } from 'lucide-react';
+
+export default function KnowledgeArticle({ article }) {
+  return (
+    <article className="brutal-card group cursor-pointer">
+      {/* Category badge */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className="font-mono text-xs bg-brutal-black text-brutal-white px-2 py-1">
+          {article.category}
+        </span>
+        {article.featured && (
+          <span className="font-mono text-xs border-2 border-brutal-accent text-brutal-accent px-2 py-1">
+            Featured
+          </span>
+        )}
+      </div>
+
+      {/* Title */}
+      <h3 className="font-bold text-xl mb-2 group-hover:text-brutal-accent transition-colors">
+        {article.title}
+      </h3>
+
+      {/* Excerpt */}
+      <p className="text-sm text-brutal-gray mb-4 line-clamp-3">
+        {article.excerpt}
+      </p>
+
+      {/* Tags */}
+      <div className="flex flex-wrap gap-2 mb-4">
+        {article.tags.slice(0, 4).map((tag) => (
+          <span 
+            key={tag} 
+            className="font-mono text-xs flex items-center gap-1 text-brutal-gray"
+          >
+            <Tag size={10} />
+            {tag}
+          </span>
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between pt-4 border-t-2 border-brutal-black/10">
+        <div className="flex items-center gap-4 font-mono text-xs text-brutal-gray">
+          <span className="flex items-center gap-1">
+            <Clock size={12} />
+            {article.readTime}
+          </span>
+          <span className="flex items-center gap-1">
+            <Calendar size={12} />
+            {article.date}
+          </span>
+        </div>
+        <div className="flex items-center gap-1 font-mono text-sm group-hover:translate-x-1 transition-transform">
+          <FileText size={16} />
+          Read
+        </div>
+      </div>
+    </article>
+  );
+}