forked from innovacion/playground
99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
'use client';
|
||
|
||
import { Download, Maximize2 } from 'lucide-react';
|
||
import { downloadImage, generateImageFilename } from '@/lib/utils';
|
||
import { useState } from 'react';
|
||
|
||
interface ImageCardProps {
|
||
imageData: string; // Base64
|
||
prompt: string;
|
||
model: string;
|
||
index?: number;
|
||
}
|
||
|
||
export function ImageCard({ imageData, prompt, model, index = 0 }: ImageCardProps) {
|
||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||
|
||
const handleDownload = () => {
|
||
const filename = generateImageFilename(prompt);
|
||
downloadImage(imageData, filename);
|
||
};
|
||
|
||
const handleFullscreen = () => {
|
||
setIsFullscreen(true);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="group relative bg-secondary rounded-lg overflow-hidden border border-border hover:border-primary transition-all">
|
||
{/* Imagen */}
|
||
<div className="relative aspect-square">
|
||
<img
|
||
src={`data:image/png;base64,${imageData}`}
|
||
alt={prompt}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
|
||
{/* Overlay con acciones */}
|
||
<div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
|
||
<button
|
||
onClick={handleFullscreen}
|
||
className="p-3 bg-white/90 hover:bg-white rounded-full transition-all"
|
||
title="Ver en pantalla completa"
|
||
>
|
||
<Maximize2 className="w-5 h-5 text-gray-900" />
|
||
</button>
|
||
<button
|
||
onClick={handleDownload}
|
||
className="p-3 bg-white/90 hover:bg-white rounded-full transition-all"
|
||
title="Descargar imagen"
|
||
>
|
||
<Download className="w-5 h-5 text-gray-900" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info */}
|
||
<div className="p-3 space-y-1">
|
||
<p className="text-xs text-muted-foreground line-clamp-2">
|
||
{prompt}
|
||
</p>
|
||
<p className="text-xs text-muted-foreground">
|
||
Modelo: {model}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modal fullscreen */}
|
||
{isFullscreen && (
|
||
<div
|
||
className="fixed inset-0 bg-black/95 z-50 flex items-center justify-center p-4"
|
||
onClick={() => setIsFullscreen(false)}
|
||
>
|
||
<button
|
||
onClick={() => setIsFullscreen(false)}
|
||
className="absolute top-4 right-4 text-white text-4xl hover:text-gray-300"
|
||
>
|
||
×
|
||
</button>
|
||
<img
|
||
src={`data:image/png;base64,${imageData}`}
|
||
alt={prompt}
|
||
className="max-w-full max-h-full object-contain"
|
||
/>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleDownload();
|
||
}}
|
||
className="absolute bottom-4 right-4 px-4 py-2 bg-white text-black rounded-lg hover:bg-gray-200 transition-all flex items-center gap-2"
|
||
>
|
||
<Download className="w-4 h-4" />
|
||
Descargar
|
||
</button>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|