Upload components/SlideDeckCard.js with huggingface_hub

components/SlideDeckCard.js

@@ -0,0 +1,62 @@
+import { ChevronRight, Presentation } from 'lucide-react';
+
+export default function SlideDeckCard({ deck }) {
+  return (
+    <div className="brutal-card group cursor-pointer">
+      {/* Slide preview */}
+      <div className="relative aspect-[16/9] bg-brutal-black mb-4 overflow-hidden">
+        <img 
+          src={deck.preview} 
+          alt={deck.title}
+          className="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity"
+        />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Presentation size={48} className="text-brutal-white opacity-60" />
+        </div>
+        {/* Slide count badge */}
+        <div className="absolute bottom-2 right-2 bg-brutal-white px-2 py-1 font-mono text-xs border-2 border-brutal-black">
+          {deck.slideCount} slides
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="space-y-3">
+        <div className="flex items-center gap-2">
+          <span className="font-mono text-xs bg-brutal-black text-brutal-white px-2 py-1">
+            {deck.topic}
+          </span>
+          {deck.isNew && (
+            <span className="font-mono text-xs bg-brutal-accent text-brutal-white px-2 py-1">
+              NEW
+            </span>
+          )}
+        </div>
+
+        <h3 className="font-bold text-lg group-hover:text-brutal-accent transition-colors">
+          {deck.title}
+        </h3>
+
+        <p className="text-sm text-brutal-gray line-clamp-2">
+          {deck.description}
+        </p>
+
+        <div className="flex items-center justify-between pt-2">
+          <div className="flex -space-x-2">
+            {deck.authors.map((author, i) => (
+              <img 
+                key={i}
+                src={author.avatar}
+                alt={author.name}
+                className="w-8 h-8 border-2 border-brutal-white"
+              />
+            ))}
+          </div>
+          <button className="font-mono text-sm flex items-center gap-1 group-hover:gap-2 transition-all">
+            View Deck
+            <ChevronRight size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}