admtracksteel/SteelXR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2026-02-27 01:55:52 +00:00
parent fbc20ae717
commit fbc279ff0a
2 changed files with 331 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ScreenshotGallery.tsx
+68 -38
View File
@@ -1,49 +1,79 @@
import { Camera, X, Download } from 'lucide-react';
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 } = useModelStore();
const { screenshots, removeScreenshot, clearScreenshots, addScreenshot } = useModelStore();
const [editingIndex, setEditingIndex] = useState<number | null>(null);
if (screenshots.length === 0) return 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">
<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 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 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>
</div>
{editingIndex !== null && screenshots[editingIndex] && (
<AnnotationEditor
imageSrc={screenshots[editingIndex]}
onSave={handleSaveAnnotated}
onClose={() => setEditingIndex(null)}
/>
)}
</>
);
}