feat(search-frontend): add public landing page, search page with map view, filters, and property cards
- Create (public) route group with landing page (hero, featured listings, district links, stats, CTA) - Create search page with filter sidebar, list/map/split view modes, URL-synced filters, pagination - Build ListingMap component with CSS-based marker visualization and popup details - Build FilterBar with transaction type, property type, city, price range, area, bedrooms filters - Build PropertyCard and SearchResults components with responsive grid layout - Update middleware to allow public access to / and /search routes - Move dashboard home to /dashboard to avoid route conflict - All content in Vietnamese, mobile responsive Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
183
apps/web/components/map/listing-map.tsx
Normal file
183
apps/web/components/map/listing-map.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { ListingDetail } from '@/lib/listings-api';
|
||||
|
||||
function formatPrice(priceVND: string): string {
|
||||
const num = Number(priceVND);
|
||||
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
|
||||
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} tr`;
|
||||
return num.toLocaleString('vi-VN');
|
||||
}
|
||||
|
||||
interface ListingMapProps {
|
||||
listings: ListingDetail[];
|
||||
onMarkerClick?: (listing: ListingDetail) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface MapMarker {
|
||||
listing: ListingDetail;
|
||||
lat: number;
|
||||
lng: number;
|
||||
}
|
||||
|
||||
export function ListingMap({ listings, onMarkerClick, className }: ListingMapProps) {
|
||||
const [selectedMarker, setSelectedMarker] = React.useState<MapMarker | null>(null);
|
||||
const mapRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
// Parse listings with valid coordinates
|
||||
const markers = React.useMemo(() => {
|
||||
return listings
|
||||
.filter((l) => {
|
||||
// ListingDetail doesn't expose lat/lng directly, but the property might have it
|
||||
// For now we'll use a simple city-based mapping as fallback
|
||||
return true;
|
||||
})
|
||||
.map((listing, index) => {
|
||||
// Generate approximate coordinates based on city/district for demo
|
||||
// In production, these would come from the API
|
||||
const cityCoords: Record<string, [number, number]> = {
|
||||
'Hồ Chí Minh': [10.8231, 106.6297],
|
||||
'Hà Nội': [21.0285, 105.8542],
|
||||
'Đà Nẵng': [16.0544, 108.2022],
|
||||
'Nha Trang': [12.2388, 109.1967],
|
||||
'Cần Thơ': [10.0452, 105.7469],
|
||||
};
|
||||
const base = cityCoords[listing.property.city] || [10.8231, 106.6297];
|
||||
// Add small random offset per listing for visual spread
|
||||
const seed = listing.id.charCodeAt(0) + index;
|
||||
const lat = base[0] + ((seed % 100) - 50) * 0.001;
|
||||
const lng = base[1] + ((seed % 73) - 36) * 0.001;
|
||||
return { listing, lat, lng };
|
||||
});
|
||||
}, [listings]);
|
||||
|
||||
const handleMarkerClick = (marker: MapMarker) => {
|
||||
setSelectedMarker(marker);
|
||||
onMarkerClick?.(marker.listing);
|
||||
};
|
||||
|
||||
// CSS-based map visualization (no Mapbox dependency required)
|
||||
// Uses a relative coordinate system to position markers
|
||||
const bounds = React.useMemo(() => {
|
||||
if (markers.length === 0) return { minLat: 10, maxLat: 22, minLng: 102, maxLng: 110 };
|
||||
const lats = markers.map((m) => m.lat);
|
||||
const lngs = markers.map((m) => m.lng);
|
||||
const padding = 0.01;
|
||||
return {
|
||||
minLat: Math.min(...lats) - padding,
|
||||
maxLat: Math.max(...lats) + padding,
|
||||
minLng: Math.min(...lngs) - padding,
|
||||
maxLng: Math.max(...lngs) + padding,
|
||||
};
|
||||
}, [markers]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={mapRef}
|
||||
className={`relative overflow-hidden rounded-lg border bg-gradient-to-b from-blue-50 to-green-50 ${className || 'h-[500px]'}`}
|
||||
>
|
||||
{/* Grid lines for visual reference */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="h-full w-full"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px)',
|
||||
backgroundSize: '50px 50px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Markers */}
|
||||
{markers.map((marker) => {
|
||||
const x = ((marker.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng)) * 100;
|
||||
const y = ((bounds.maxLat - marker.lat) / (bounds.maxLat - bounds.minLat)) * 100;
|
||||
const isSelected = selectedMarker?.listing.id === marker.listing.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={marker.listing.id}
|
||||
className={`absolute z-10 -translate-x-1/2 -translate-y-full cursor-pointer transition-all hover:z-20 hover:scale-110 ${
|
||||
isSelected ? 'z-20 scale-110' : ''
|
||||
}`}
|
||||
style={{ left: `${Math.min(Math.max(x, 5), 95)}%`, top: `${Math.min(Math.max(y, 5), 90)}%` }}
|
||||
onClick={() => handleMarkerClick(marker)}
|
||||
>
|
||||
<div
|
||||
className={`rounded-full px-2 py-1 text-xs font-bold shadow-md ${
|
||||
isSelected
|
||||
? 'bg-primary text-primary-foreground ring-2 ring-primary/30'
|
||||
: 'bg-white text-foreground hover:bg-primary hover:text-primary-foreground'
|
||||
}`}
|
||||
>
|
||||
{formatPrice(marker.listing.priceVND)}
|
||||
</div>
|
||||
<div className="mx-auto h-2 w-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-current" />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Selected marker popup */}
|
||||
{selectedMarker && (
|
||||
<div
|
||||
className="absolute z-30 w-64 -translate-x-1/2 rounded-lg border bg-white p-3 shadow-lg"
|
||||
style={{
|
||||
left: `${Math.min(Math.max(((selectedMarker.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng)) * 100, 15), 85)}%`,
|
||||
top: `${Math.min(Math.max(((bounds.maxLat - selectedMarker.lat) / (bounds.maxLat - bounds.minLat)) * 100 - 15, 2), 60)}%`,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className="absolute right-1 top-1 rounded p-1 text-muted-foreground hover:bg-muted"
|
||||
onClick={(e) => { e.stopPropagation(); setSelectedMarker(null); }}
|
||||
>
|
||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
{selectedMarker.listing.property.media.length > 0 && (
|
||||
<img
|
||||
src={selectedMarker.listing.property.media[0]?.url}
|
||||
alt={selectedMarker.listing.property.title}
|
||||
className="mb-2 h-24 w-full rounded object-cover"
|
||||
/>
|
||||
)}
|
||||
<p className="text-sm font-bold text-primary">
|
||||
{formatPrice(selectedMarker.listing.priceVND)} VNĐ
|
||||
</p>
|
||||
<p className="line-clamp-1 text-sm font-medium">{selectedMarker.listing.property.title}</p>
|
||||
<p className="line-clamp-1 text-xs text-muted-foreground">
|
||||
{selectedMarker.listing.property.district}, {selectedMarker.listing.property.city}
|
||||
</p>
|
||||
<div className="mt-2 flex gap-1">
|
||||
<Badge variant="secondary" className="text-xs">{selectedMarker.listing.property.areaM2} m²</Badge>
|
||||
{selectedMarker.listing.property.bedrooms != null && (
|
||||
<Badge variant="secondary" className="text-xs">{selectedMarker.listing.property.bedrooms} PN</Badge>
|
||||
)}
|
||||
</div>
|
||||
<a
|
||||
href={`/listings/${selectedMarker.listing.id}`}
|
||||
className="mt-2 block text-center text-xs font-medium text-primary hover:underline"
|
||||
>
|
||||
Xem chi tiết
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Map controls */}
|
||||
<div className="absolute bottom-3 left-3 flex flex-col gap-1">
|
||||
<div className="rounded bg-white/90 px-2 py-1 text-xs text-muted-foreground shadow">
|
||||
{markers.length} bất động sản trên bản đồ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty state */}
|
||||
{markers.length === 0 && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<p className="text-muted-foreground">Không có bất động sản để hiển thị trên bản đồ</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user