feat(web): complete du-an project pages, neighborhood components, and public notification bell
- Add grid/map view toggle on /du-an listing page with Mapbox project markers - Enhance du-an detail with master plan viewer, neighborhood radar chart, POI map, and price history chart - Create neighborhood component suite: radar chart (Recharts), POI map (Mapbox), score badges - Add du-an API client, server-side fetching, and React Query hooks - Wire NotificationBell into public layout header for authenticated users - Fix missing PROJECT_STATUS_COLORS import in du-an detail client Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
244
apps/web/components/neighborhood/neighborhood-poi-map.tsx
Normal file
244
apps/web/components/neighborhood/neighborhood-poi-map.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
'use client';
|
||||
|
||||
/* eslint-disable import-x/no-named-as-default-member */
|
||||
import mapboxgl from 'mapbox-gl';
|
||||
import * as React from 'react';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { type POIItem, type POICategory, POI_CATEGORY_CONFIG } from './types';
|
||||
|
||||
interface NeighborhoodPOIMapProps {
|
||||
center: { lat: number; lng: number };
|
||||
pois: POIItem[];
|
||||
zoom?: number;
|
||||
height?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function NeighborhoodPOIMap({
|
||||
center,
|
||||
pois,
|
||||
zoom = 14,
|
||||
height = '400px',
|
||||
className,
|
||||
}: NeighborhoodPOIMapProps) {
|
||||
const mapContainerRef = React.useRef<HTMLDivElement>(null);
|
||||
const mapRef = React.useRef<mapboxgl.Map | null>(null);
|
||||
const markersRef = React.useRef<mapboxgl.Marker[]>([]);
|
||||
|
||||
const [activeCategories, setActiveCategories] = React.useState<Set<POICategory>>(
|
||||
() => new Set(Object.keys(POI_CATEGORY_CONFIG) as POICategory[]),
|
||||
);
|
||||
|
||||
const toggleCategory = React.useCallback((category: POICategory) => {
|
||||
setActiveCategories((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(category)) {
|
||||
next.delete(category);
|
||||
} else {
|
||||
next.add(category);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Initialize map
|
||||
React.useEffect(() => {
|
||||
if (!mapContainerRef.current) return;
|
||||
|
||||
const token = process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
|
||||
if (!token) return;
|
||||
|
||||
mapboxgl.accessToken = token;
|
||||
|
||||
const map = new mapboxgl.Map({
|
||||
container: mapContainerRef.current,
|
||||
style: 'mapbox://styles/mapbox/streets-v12',
|
||||
center: [center.lng, center.lat],
|
||||
zoom,
|
||||
attributionControl: false,
|
||||
});
|
||||
|
||||
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
|
||||
map.addControl(
|
||||
new mapboxgl.AttributionControl({ compact: true }),
|
||||
'bottom-right',
|
||||
);
|
||||
|
||||
mapRef.current = map;
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Update center when prop changes
|
||||
React.useEffect(() => {
|
||||
mapRef.current?.flyTo({ center: [center.lng, center.lat], zoom });
|
||||
}, [center, zoom]);
|
||||
|
||||
// Render POI markers based on active categories
|
||||
React.useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
|
||||
// Clear existing markers
|
||||
markersRef.current.forEach((m) => m.remove());
|
||||
markersRef.current = [];
|
||||
|
||||
const visiblePois = pois.filter((poi) => activeCategories.has(poi.category));
|
||||
|
||||
visiblePois.forEach((poi) => {
|
||||
const config = POI_CATEGORY_CONFIG[poi.category];
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'poi-marker';
|
||||
el.style.cssText = `
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: ${config.color};
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s;
|
||||
`;
|
||||
el.textContent = config.icon;
|
||||
el.title = `${poi.name} (${config.label})`;
|
||||
|
||||
el.addEventListener('mouseenter', () => {
|
||||
el.style.transform = 'scale(1.3)';
|
||||
});
|
||||
el.addEventListener('mouseleave', () => {
|
||||
el.style.transform = 'scale(1)';
|
||||
});
|
||||
|
||||
const popup = new mapboxgl.Popup({ offset: 20, closeButton: false })
|
||||
.setHTML(
|
||||
`<div style="font-family:system-ui,sans-serif;padding:4px 0;">
|
||||
<p style="font-weight:600;font-size:13px;margin:0 0 2px;">${config.icon} ${poi.name}</p>
|
||||
<p style="font-size:12px;color:#666;margin:0;">${config.label}${poi.distance ? ` · ${poi.distance}m` : ''}</p>
|
||||
</div>`,
|
||||
);
|
||||
|
||||
const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
|
||||
.setLngLat([poi.lng, poi.lat])
|
||||
.setPopup(popup)
|
||||
.addTo(map);
|
||||
|
||||
markersRef.current.push(marker);
|
||||
});
|
||||
}, [pois, activeCategories]);
|
||||
|
||||
// Add property center marker
|
||||
React.useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.style.cssText = `
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: hsl(142.1, 76.2%, 36.3%);
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 0 0 2px hsl(142.1, 76.2%, 36.3%), 0 2px 8px rgba(0,0,0,0.3);
|
||||
`;
|
||||
|
||||
const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
|
||||
.setLngLat([center.lng, center.lat])
|
||||
.addTo(map);
|
||||
|
||||
return () => {
|
||||
marker.remove();
|
||||
};
|
||||
}, [center]);
|
||||
|
||||
const hasToken = typeof process !== 'undefined' && process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
|
||||
|
||||
const allCategories = Object.entries(POI_CATEGORY_CONFIG) as [
|
||||
POICategory,
|
||||
(typeof POI_CATEGORY_CONFIG)[POICategory],
|
||||
][];
|
||||
|
||||
return (
|
||||
<div className={cn('relative overflow-hidden rounded-lg border', className)}>
|
||||
<div ref={mapContainerRef} style={{ height }} className="w-full" />
|
||||
|
||||
{/* Layer toggle controls */}
|
||||
<div className="absolute left-3 top-3 flex flex-col gap-1.5">
|
||||
{allCategories.map(([key, config]) => {
|
||||
const isActive = activeCategories.has(key);
|
||||
const poiCount = pois.filter((p) => p.category === key).length;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => toggleCategory(key)}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium shadow-sm transition-all',
|
||||
isActive
|
||||
? 'bg-white text-foreground ring-1 ring-inset ring-border'
|
||||
: 'bg-white/60 text-muted-foreground line-through ring-1 ring-inset ring-transparent',
|
||||
)}
|
||||
title={`${isActive ? 'Ẩn' : 'Hiện'} ${config.label}`}
|
||||
>
|
||||
<span>{config.icon}</span>
|
||||
<span>{config.label}</span>
|
||||
{poiCount > 0 && (
|
||||
<span
|
||||
className={cn(
|
||||
'ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold',
|
||||
isActive
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'bg-muted text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{poiCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Fallback when no Mapbox token */}
|
||||
{!hasToken && (
|
||||
<div
|
||||
className="absolute inset-0 flex items-center justify-center bg-gradient-to-b from-blue-50 to-green-50"
|
||||
style={{ height }}
|
||||
>
|
||||
<div className="text-center">
|
||||
<svg
|
||||
className="mx-auto mb-2 h-10 w-10 text-muted-foreground"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Thiết lập NEXT_PUBLIC_MAPBOX_TOKEN để hiển thị bản đồ POI
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user