gpt-engineer-app[bot]
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { X, Download, Pencil } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useModelStore } from '@/stores/useModelStore';
|
|
import { AnnotationEditor } from '@/components/AnnotationEditor';
|
|
|
|
export function ScreenshotGallery() {
|
|
const { screenshots, removeScreenshot, clearScreenshots, addScreenshot } = useModelStore();
|
|
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
|
|
|
if (screenshots.length === 0 && editingIndex === null) return null;
|
|
|
|
const handleSaveAnnotated = (dataUrl: string) => {
|
|
if (editingIndex !== null) {
|
|
// Replace the original screenshot with the annotated version
|
|
useModelStore.setState((state) => ({
|
|
screenshots: state.screenshots.map((s, i) => (i === editingIndex ? dataUrl : s)),
|
|
}));
|
|
setEditingIndex(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
|
|
Capturas ({screenshots.length})
|
|
</h3>
|
|
<Button variant="ghost" size="sm" className="h-6 text-[10px]" onClick={clearScreenshots}>
|
|
Limpar
|
|
</Button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{screenshots.map((src, i) => (
|
|
<div key={i} className="group relative rounded-lg border overflow-hidden bg-muted/30">
|
|
<img src={src} alt={`Captura ${i + 1}`} className="w-full aspect-video object-cover" />
|
|
<div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={() => setEditingIndex(i)}
|
|
className="h-6 w-6 rounded bg-card/90 flex items-center justify-center"
|
|
title="Anotar"
|
|
>
|
|
<Pencil className="h-3 w-3 text-primary" />
|
|
</button>
|
|
<a
|
|
href={src}
|
|
download={`TrackkSteelXR_capture_${i + 1}.png`}
|
|
className="h-6 w-6 rounded bg-card/90 flex items-center justify-center"
|
|
>
|
|
<Download className="h-3 w-3 text-primary" />
|
|
</a>
|
|
<button
|
|
onClick={() => removeScreenshot(i)}
|
|
className="h-6 w-6 rounded bg-card/90 flex items-center justify-center"
|
|
>
|
|
<X className="h-3 w-3 text-destructive" />
|
|
</button>
|
|
</div>
|
|
<div className="absolute bottom-1 left-1">
|
|
<span className="font-mono text-[9px] bg-card/80 rounded px-1 py-0.5 text-muted-foreground">
|
|
#{i + 1}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{editingIndex !== null && screenshots[editingIndex] && (
|
|
<AnnotationEditor
|
|
imageSrc={screenshots[editingIndex]}
|
|
onSave={handleSaveAnnotated}
|
|
onClose={() => setEditingIndex(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|