forked from innovacion/playground
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
'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>
|
|
);
|
|
}
|