70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
|
|
import React from 'react';
|
|
import { VideoHistoryItem } from '../types';
|
|
import { Calendar, Film } from 'lucide-react';
|
|
|
|
interface VideoGalleryProps {
|
|
videos: VideoHistoryItem[];
|
|
}
|
|
|
|
export const VideoGallery: React.FC<VideoGalleryProps> = ({ videos }) => {
|
|
return (
|
|
<div className="w-full max-w-7xl mx-auto px-4 py-12">
|
|
<h2 className="text-3xl font-serif font-bold mb-8 text-white border-b border-white/10 pb-4">
|
|
Your Creations
|
|
</h2>
|
|
|
|
{videos.length === 0 ? (
|
|
<div className="text-center text-gray-500 py-12">
|
|
<p>No videos found. Create your first campaign above!</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{videos.map((video) => (
|
|
<div
|
|
key={video.id}
|
|
className="group relative bg-glass backdrop-blur-md border border-glassBorder rounded-xl overflow-hidden hover:border-blue-500/50 transition-all duration-300 hover:shadow-2xl hover:-translate-y-1"
|
|
>
|
|
{/* Video Thumbnail Area */}
|
|
<div className="relative aspect-video bg-gray-900 overflow-hidden">
|
|
{video.result_movie_url ? (
|
|
<video
|
|
src={video.result_movie_url}
|
|
className="w-full h-full object-cover"
|
|
controls
|
|
preload="metadata"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-gray-800 text-gray-500">
|
|
<Film className="opacity-20" size={48} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<span className="text-xs text-gray-400 uppercase tracking-wider mb-1">Created At</span>
|
|
<div className="flex items-center text-gray-200 text-sm font-mono">
|
|
<Calendar size={14} className="mr-2 text-blue-400" />
|
|
{video.created_at}
|
|
</div>
|
|
</div>
|
|
{video.status && (
|
|
<div className={`px-2 py-1 rounded text-xs font-bold uppercase ${
|
|
video.status.toLowerCase() === 'completed' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
|
|
}`}>
|
|
{video.status}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|