207a2013f3
- Multi-step wizard for listing creation (basic info, location, details, pricing, images) - Listing detail page with image gallery, property specs, seller/agent info, stats - Listings index page with filters (transaction type, property type) and pagination - Edit page with tab-based form (read-only until backend PATCH endpoint available) - Drag & drop image upload component with preview and multi-file support - Dashboard layout with navigation bar - New UI primitives: textarea, select, badge, tabs - Listings API client with typed endpoints matching backend contract - Zod validation schemas for all form steps - Status badges with Vietnamese labels for all listing states - Responsive design across all pages Co-Authored-By: Paperclip <noreply@paperclip.ing>
85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
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">
|
|
<img
|
|
src={images[selectedIndex]?.url}
|
|
alt={images[selectedIndex]?.caption || `Ảnh ${selectedIndex + 1}`}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
{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(
|
|
'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',
|
|
)}
|
|
>
|
|
<img
|
|
src={img.url}
|
|
alt={img.caption || `Thumbnail ${index + 1}`}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|