feat(web): add listing detail page and Mapbox GL JS map integration

- Create public listing detail page at /listings/[id] with image gallery,
  property specs, contact card, and embedded map
- Rewrite ListingMap component to use Mapbox GL JS with interactive markers,
  price labels, and listing popups
- Add selectedListingId prop to search page map views for marker highlighting
- Install mapbox-gl dependency

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-08 05:12:48 +07:00
parent 51c6eed565
commit b6bb422d33
5 changed files with 729 additions and 136 deletions

View File

@@ -14,6 +14,7 @@
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^1.7.0",
"mapbox-gl": "^3.21.0",
"next": "^14.2.0",
"react": "^18.3.0",
"react-dom": "^18.3.0",
@@ -23,6 +24,7 @@
"zustand": "^5.0.12"
},
"devDependencies": {
"@types/mapbox-gl": "^3.5.0",
"@types/node": "^22.0.0",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",