afa70320f5
- Whitelist OAuth error codes; never render raw URL params (XSS fix) - Add error state UI with retry button for API failures on homepage and search - Use <article> for property cards with ARIA labels and semantic list markup - Replace raw <img> with Next.js <Image> across all listing/gallery/KYC pages - Add security headers (X-Content-Type-Options, X-Frame-Options, etc.) in next.config.js - Gate console.error behind NODE_ENV check in global error boundary - Mapbox confirmed npm-bundled (SRI N/A) Co-Authored-By: Paperclip <noreply@paperclip.ing>
91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import Image from 'next/image';
|
|
import { cn } from '@/lib/utils';
|
|
import type { PropertyMedia } from '@/lib/listings-api';
|
|
|
|
interface ImageGalleryProps {
|
|
media: PropertyMedia[];
|
|
className?: string;
|
|
}
|
|
|
|
export function ImageGallery({ media, className }: ImageGalleryProps) {
|
|
const images = media.filter((m) => m.type === 'image').sort((a, b) => a.order - b.order);
|
|
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
|
|
|
if (images.length === 0) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex aspect-video items-center justify-center rounded-lg bg-muted text-muted-foreground',
|
|
className,
|
|
)}
|
|
>
|
|
Chưa có hình ảnh
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn('space-y-3', className)}>
|
|
{/* Main image */}
|
|
<div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
|
|
<Image
|
|
src={images[selectedIndex]?.url ?? ''}
|
|
alt={images[selectedIndex]?.caption || `Ảnh ${selectedIndex + 1}`}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 60vw"
|
|
className="object-cover"
|
|
priority={selectedIndex === 0}
|
|
/>
|
|
{images.length > 1 && (
|
|
<>
|
|
<button
|
|
onClick={() => setSelectedIndex((i) => (i > 0 ? i - 1 : images.length - 1))}
|
|
className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
|
|
aria-label="Ảnh trước"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
|
</button>
|
|
<button
|
|
onClick={() => setSelectedIndex((i) => (i < images.length - 1 ? i + 1 : 0))}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
|
|
aria-label="Ảnh tiếp"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
|
</button>
|
|
</>
|
|
)}
|
|
<div className="absolute bottom-2 right-2 rounded bg-black/60 px-2 py-1 text-xs text-white">
|
|
{selectedIndex + 1} / {images.length}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Thumbnails */}
|
|
{images.length > 1 && (
|
|
<div className="flex gap-2 overflow-x-auto pb-1">
|
|
{images.map((img, index) => (
|
|
<button
|
|
key={img.id}
|
|
onClick={() => setSelectedIndex(index)}
|
|
className={cn(
|
|
'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
|
|
index === selectedIndex ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100',
|
|
)}
|
|
>
|
|
<Image
|
|
src={img.url}
|
|
alt={img.caption || `Thumbnail ${index + 1}`}
|
|
fill
|
|
sizes="64px"
|
|
className="object-cover"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|