Upload components/PodcastCard.js with huggingface_hub

components/PodcastCard.js

@@ -0,0 +1,57 @@
+import { Play, Clock, Calendar } from 'lucide-react';
+
+export default function PodcastCard({ podcast }) {
+  return (
+    <div className="brutal-card group cursor-pointer">
+      {/* Thumbnail */}
+      <div className="relative aspect-video bg-brutal-black mb-4 overflow-hidden">
+        <img 
+          src={podcast.image} 
+          alt={podcast.title}
+          className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity"
+        />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="w-16 h-16 bg-brutal-white border-2 border-brutal-black flex items-center justify-center shadow-brutal group-hover:shadow-brutal-hover group-hover:scale-110 transition-all">
+            <Play size={24} className="ml-1" />
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="space-y-3">
+        <div className="flex items-center gap-3">
+          <span className="font-mono text-xs bg-brutal-black text-brutal-white px-2 py-1">
+            {podcast.category}
+          </span>
+          <span className="font-mono text-xs text-brutal-gray flex items-center gap-1">
+            <Clock size={12} />
+            {podcast.duration}
+          </span>
+        </div>
+
+        <h3 className="font-bold text-lg leading-tight group-hover:text-brutal-accent transition-colors">
+          {podcast.title}
+        </h3>
+
+        <p className="text-sm text-brutal-gray line-clamp-2">
+          {podcast.description}
+        </p>
+
+        <div className="flex items-center gap-2 pt-2 border-t-2 border-brutal-black/10">
+          <img 
+            src={podcast.hostAvatar} 
+            alt={podcast.host}
+            className="w-8 h-8 border-2 border-brutal-black"
+          />
+          <div>
+            <p className="font-mono text-xs font-semibold">{podcast.host}</p>
+            <p className="font-mono text-xs text-brutal-gray flex items-center gap-1">
+              <Calendar size={10} />
+              {podcast.date}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}