Initial commit

frontend/components/video-card.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { Video, Download, Copy, Check } from 'lucide-react';
+import { useState } from 'react';
+
+interface VideoCardProps {
+  videoData: string; // Base64
+  prompt: string;
+  model: string;
+}
+
+export function VideoCard({ videoData, prompt, model }: VideoCardProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleDownload = () => {
+    const link = document.createElement('a');
+    link.href = `data:video/mp4;base64,${videoData}`;
+    link.download = `video-${Date.now()}.mp4`;
+    link.click();
+  };
+
+  const handleCopyPrompt = async () => {
+    await navigator.clipboard.writeText(prompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="bg-card border border-border rounded-xl overflow-hidden shadow-lg group">
+      {/* Video */}
+      <div className="relative aspect-video bg-muted">
+        <video
+          src={`data:video/mp4;base64,${videoData}`}
+          controls
+          className="w-full h-full object-contain"
+        />
+      </div>
+
+      {/* Info */}
+      <div className="p-4 space-y-3">
+        {/* Prompt */}
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <p className="text-xs font-medium text-muted-foreground">Prompt</p>
+            <button
+              onClick={handleCopyPrompt}
+              className="p-1 hover:bg-accent rounded transition-colors"
+              title="Copiar prompt"
+            >
+              {copied ? (
+                <Check className="w-3 h-3 text-green-500" />
+              ) : (
+                <Copy className="w-3 h-3 text-muted-foreground" />
+              )}
+            </button>
+          </div>
+          <p className="text-sm text-foreground line-clamp-2">{prompt}</p>
+        </div>
+
+        {/* Model */}
+        <div className="flex items-center justify-between text-xs">
+          <span className="text-muted-foreground">Modelo:</span>
+          <span className="font-medium text-foreground">{model}</span>
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-2 border-t border-border">
+          <button
+            onClick={handleDownload}
+            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
+          >
+            <Download className="w-4 h-4" />
+            Descargar
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}