pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 08:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Display photos in submissions

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 00:59:26 +00:00
parent f3c4d97992
commit 9b3bc388ad
1 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/moderation/ModerationQueue.tsx
View File

@@ -548,7 +548,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
<div className="flex items-center gap-2 text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>Rating: {item.content.rating}/5</span> <span>Rating: {item.content.rating}/5</span>
</div> </div>
{item.content.photos && item.content.photos.length > 0 && ( {item.content.photos && item.content.photos.length > 0 && (
<div className="mt-3"> <div className="mt-3">
<div className="text-sm font-medium mb-2">Attached Photos:</div> <div className="text-sm font-medium mb-2">Attached Photos:</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-2"> <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
@@ -557,8 +557,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
<img <img
src={photo.url} src={photo.url}
alt={`Review photo ${index + 1}`} alt={`Review photo ${index + 1}`}
className="w-full h-20 object-cover rounded border" className="w-full h-20 object-cover rounded border bg-muted/30"
onError={(e) => {
console.error('Failed to load review photo:', photo.url);
(e.target as HTMLImageElement).style.display = 'none';
}}
onLoad={() => console.log('Review photo loaded:', photo.url)}
/> />
<div className="absolute inset-0 flex items-center justify-center bg-muted/80 text-xs text-muted-foreground opacity-0 hover:opacity-100 transition-opacity">
Photo {index + 1}
</div>
</div> </div>
))} ))}
</div> </div>
@@ -587,18 +595,39 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
</div> </div>
)} )}
{/* Photos */} {/* Photos */}
{item.content.photos && item.content.photos.length > 0 ? ( {item.content.photos && item.content.photos.length > 0 ? (
<div className="space-y-4"> <div className="space-y-4">
<div className="text-sm font-medium">Photos ({item.content.photos.length}):</div> <div className="text-sm font-medium">Photos ({item.content.photos.length}):</div>
{item.content.photos.map((photo: any, index: number) => ( {item.content.photos.map((photo: any, index: number) => (
<div key={index} className="border rounded-lg p-3 space-y-2"> <div key={index} className="border rounded-lg p-3 space-y-2">
<img <div className="relative min-h-[100px] bg-muted/30 rounded border overflow-hidden">
src={photo.url} <img
alt={`Photo ${index + 1}: ${photo.filename}`} src={photo.url}
className="w-full max-h-64 object-contain rounded border bg-muted/30" alt={`Photo ${index + 1}: ${photo.filename}`}
/> className="w-full max-h-64 object-contain rounded"
onError={(e) => {
console.error('Failed to load photo submission:', photo);
const target = e.target as HTMLImageElement;
target.style.display = 'none';
const parent = target.parentElement;
if (parent) {
parent.innerHTML = `
<div class="absolute inset-0 flex flex-col items-center justify-center text-destructive text-xs">
<div>⚠️ Image failed to load</div>
<div class="mt-1 font-mono text-xs break-all px-2">${photo.url}</div>
</div>
`;
}
}}
onLoad={() => console.log('Photo submission loaded:', photo.url)}
/>
</div>
<div className="space-y-1 text-xs text-muted-foreground"> <div className="space-y-1 text-xs text-muted-foreground">
<div className="flex justify-between">
<span className="font-medium">URL:</span>
<span className="font-mono text-xs break-all">{photo.url}</span>
</div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="font-medium">Filename:</span> <span className="font-medium">Filename:</span>
<span>{photo.filename || 'Unknown'}</span> <span>{photo.filename || 'Unknown'}</span>