08c8b5e027
Some checks failed
CI / E2E Tests (push) Has been skipped
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 6s
Security Scanning / Trivy Scan — API Image (push) Failing after 25s
Security Scanning / Trivy Scan — Web Image (push) Failing after 26s
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 23s
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 56s
Deploy / Build API Image (push) Failing after 18s
Deploy / Build Web Image (push) Failing after 10s
Deploy / Build AI Services Image (push) Failing after 9s
E2E Tests / Playwright E2E (push) Failing after 7s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 2s
Security Scanning / Trivy Filesystem Scan (push) Failing after 26s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Smoke Test Staging (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Security Scanning / Security Gate (push) Failing after 0s
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
Backend
-------
- New endpoint GET /analytics/pois/nearby?lat&lng&radius&limit (public,
no guard). Mirrors the neighborhoods/:district/score shape.
- Prisma $queryRawUnsafe with PostGIS ST_DWithin on POI.location::geography
and ST_Distance for the ordered-by-distance result. Default radius 2km,
max 10km; default limit 30, max 100.
- Response maps POIType enum → frontend POICategory so the existing pill
filter in NeighborhoodPOIMap works out of the box:
SCHOOL/UNIVERSITY → school
HOSPITAL/CLINIC/PHARMACY → hospital
METRO_STATION/BUS_STOP → transit
MALL/MARKET/SUPERMARKET/BANK/ATM → shopping
RESTAURANT/CAFE → restaurant
PARK → park
else → shopping (fallback, still filterable)
- New files: application/queries/get-nearby-pois/{query,handler}.ts +
presentation/dto/get-nearby-pois.dto.ts. Registered in analytics.module.ts.
Frontend
--------
- analytics-api.ts: exports NearbyPOI, NearbyPOIsResponse, NearbyPOICategory
and analyticsApi.getNearbyPOIs(lat, lng, radius?, limit?).
- listing-detail-client.tsx: the "Vị trí trên bản đồ" card no longer
renders <ListingMap> for a single pin — it now renders
<NeighborhoodPOIMap> with the property's coords as center, the nearby
POIs as markers, and the existing category-filter pills. A small
"Tìm thấy N điểm quan tâm trong bán kính 2 km" summary sits below.
- The neighborhood score radar card remains below, untouched.
- The spec fixture + mocks extended for the new analyticsApi dependency.
No schema change, no migration. Phase C of 4.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
495 lines
21 KiB
TypeScript
495 lines
21 KiB
TypeScript
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import Link from 'next/link';
|
|
import * as React from 'react';
|
|
import { AddToCompareButton } from '@/components/comparison/add-to-compare-button';
|
|
import { ImageGallery } from '@/components/listings/image-gallery';
|
|
import { InquiryModal } from '@/components/listings/inquiry-modal';
|
|
import { PriceHistoryChart } from '@/components/listings/price-history-chart';
|
|
import { SocialShare } from '@/components/listings/social-share';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { AiEstimateButton } from '@/components/valuation/ai-estimate-button';
|
|
import { analyticsApi } from '@/lib/analytics-api';
|
|
import type { NearbyPOI } from '@/lib/analytics-api';
|
|
import { formatPrice, formatPricePerM2 } from '@/lib/currency';
|
|
import type { ListingDetail, NeighborhoodScoreResult, PriceHistoryItem } from '@/lib/listings-api';
|
|
import { listingsApi } from '@/lib/listings-api';
|
|
import { PROPERTY_TYPES, DIRECTIONS, TRANSACTION_TYPES } from '@/lib/validations/listings';
|
|
import type { POIItem } from '@/components/neighborhood';
|
|
|
|
const NeighborhoodRadarChart = dynamic(
|
|
() => import('@/components/neighborhood').then((m) => m.NeighborhoodRadarChart),
|
|
{ ssr: false },
|
|
);
|
|
|
|
const NeighborhoodPOIMap = dynamic(
|
|
() => import('@/components/neighborhood').then((m) => m.NeighborhoodPOIMap),
|
|
{
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="flex h-[400px] items-center justify-center rounded-lg bg-muted">
|
|
<p className="text-sm text-muted-foreground">{'\u0110ang t\u1ea3i b\u1ea3n \u0111\u1ed3...'}</p>
|
|
</div>
|
|
),
|
|
},
|
|
);
|
|
|
|
function getLabel(list: readonly { value: string; label: string }[], value: string | null) {
|
|
if (!value) return null;
|
|
return list.find((item) => item.value === value)?.label ?? value;
|
|
}
|
|
|
|
interface ListingDetailClientProps {
|
|
listing: ListingDetail;
|
|
}
|
|
|
|
function mapScoreToCategories(result: NeighborhoodScoreResult) {
|
|
return [
|
|
{ category: 'education', label: 'Giáo dục', score: result.educationScore },
|
|
{ category: 'healthcare', label: 'Y tế', score: result.healthcareScore },
|
|
{ category: 'transport', label: 'Giao thông', score: result.transportScore },
|
|
{ category: 'shopping', label: 'Mua sắm', score: result.shoppingScore },
|
|
{ category: 'environment', label: 'Môi trường', score: result.greeneryScore },
|
|
{ category: 'safety', label: 'An ninh', score: result.safetyScore },
|
|
];
|
|
}
|
|
|
|
export function ListingDetailClient({ listing }: ListingDetailClientProps) {
|
|
const { property, seller, agent } = listing;
|
|
const transactionLabel = getLabel(TRANSACTION_TYPES, listing.transactionType);
|
|
const propertyTypeLabel = getLabel(PROPERTY_TYPES, property.propertyType);
|
|
const [inquiryOpen, setInquiryOpen] = React.useState(false);
|
|
const [neighborhoodScore, setNeighborhoodScore] = React.useState<NeighborhoodScoreResult | null>(null);
|
|
const [priceHistory, setPriceHistory] = React.useState<PriceHistoryItem[]>([]);
|
|
const [nearbyPois, setNearbyPois] = React.useState<POIItem[]>([]);
|
|
|
|
React.useEffect(() => {
|
|
if (!property.district || !property.city) return;
|
|
listingsApi
|
|
.getNeighborhoodScore(property.district, property.city)
|
|
.then(setNeighborhoodScore)
|
|
.catch(() => {/* silently ignore — section simply won't render */});
|
|
}, [property.district, property.city]);
|
|
|
|
React.useEffect(() => {
|
|
const { latitude, longitude } = property;
|
|
if (latitude == null || longitude == null) return;
|
|
analyticsApi
|
|
.getNearbyPOIs(latitude, longitude)
|
|
.then((res) => {
|
|
const mapped: POIItem[] = res.pois.map((p: NearbyPOI) => ({
|
|
id: p.id,
|
|
name: p.name,
|
|
category: p.category,
|
|
lat: p.lat,
|
|
lng: p.lng,
|
|
distance: p.distance,
|
|
}));
|
|
setNearbyPois(mapped);
|
|
})
|
|
.catch(() => {/* silently ignore — map still renders without POIs */});
|
|
}, [property.latitude, property.longitude]);
|
|
|
|
React.useEffect(() => {
|
|
listingsApi
|
|
.getPriceHistory(listing.id)
|
|
.then(setPriceHistory)
|
|
.catch(() => {/* silently ignore */});
|
|
}, [listing.id]);
|
|
|
|
return (
|
|
<div className="mx-auto max-w-6xl px-4 py-6">
|
|
{/* Breadcrumb */}
|
|
<nav className="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
|
|
<Link href="/" className="hover:text-foreground">Trang chủ</Link>
|
|
<span>/</span>
|
|
<Link href="/search" className="hover:text-foreground">Tìm kiếm</Link>
|
|
<span>/</span>
|
|
<span className="truncate text-foreground">{property.title}</span>
|
|
</nav>
|
|
|
|
{/* Header */}
|
|
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="mb-2 flex flex-wrap items-center gap-2">
|
|
{transactionLabel && (
|
|
<Badge variant={listing.transactionType === 'SALE' ? 'default' : 'secondary'}>
|
|
{transactionLabel}
|
|
</Badge>
|
|
)}
|
|
{propertyTypeLabel && <Badge variant="outline">{propertyTypeLabel}</Badge>}
|
|
</div>
|
|
<h1 className="text-2xl font-bold md:text-3xl">{property.title}</h1>
|
|
<p className="mt-1 flex items-center gap-1 text-muted-foreground">
|
|
<svg className="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
{property.address}, {property.ward}, {property.district}, {property.city}
|
|
</p>
|
|
</div>
|
|
<div className="shrink-0 text-right">
|
|
<p className="text-2xl font-bold text-primary md:text-3xl">{formatPrice(listing.priceVND)} VND</p>
|
|
{listing.pricePerM2 != null && (
|
|
<p className="text-sm text-muted-foreground">
|
|
~{formatPricePerM2(listing.pricePerM2)}
|
|
</p>
|
|
)}
|
|
{listing.rentPriceMonthly && (
|
|
<p className="text-sm text-muted-foreground">
|
|
Thuê: {formatPrice(listing.rentPriceMonthly)}/tháng
|
|
</p>
|
|
)}
|
|
<div className="mt-3">
|
|
<AddToCompareButton listingId={listing.id} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image gallery */}
|
|
<ImageGallery media={property.media} />
|
|
|
|
{/* Quick specs bar */}
|
|
<div className="my-6 flex flex-wrap gap-4 rounded-lg border bg-card p-4">
|
|
<QuickStat icon="area" label="Diện tích" value={`${property.areaM2} m²`} />
|
|
{property.bedrooms != null && (
|
|
<QuickStat icon="bed" label="Phòng ngủ" value={`${property.bedrooms}`} />
|
|
)}
|
|
{property.bathrooms != null && (
|
|
<QuickStat icon="bath" label="Phòng tắm" value={`${property.bathrooms}`} />
|
|
)}
|
|
{property.floor != null && property.totalFloors != null && (
|
|
<QuickStat icon="floors" label="Tầng" value={`${property.floor} / ${property.totalFloors}`} />
|
|
)}
|
|
{property.floor != null && property.totalFloors == null && (
|
|
<QuickStat icon="floors" label="Tầng" value={`${property.floor}`} />
|
|
)}
|
|
{property.floor == null && property.floors != null && (
|
|
<QuickStat icon="floors" label="Số tầng" value={`${property.floors}`} />
|
|
)}
|
|
{property.direction && (
|
|
<QuickStat icon="compass" label="Hướng" value={getLabel(DIRECTIONS, property.direction) || ''} />
|
|
)}
|
|
{property.metroDistanceM != null && (
|
|
<QuickStat
|
|
icon="transit"
|
|
label="Cách metro"
|
|
value={
|
|
property.metroDistanceM < 1000
|
|
? `${property.metroDistanceM} m`
|
|
: `${(property.metroDistanceM / 1000).toFixed(1)} km`
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
{/* Main content */}
|
|
<div className="space-y-6 lg:col-span-2">
|
|
{/* Description */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Mô tả</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-wrap text-sm leading-relaxed">{property.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Details */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Thông tin chi tiết</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
|
|
<InfoItem label="Loại BĐS" value={propertyTypeLabel || '---'} />
|
|
<InfoItem label="Diện tích tim tường" value={`${property.areaM2} m²`} />
|
|
<InfoItem
|
|
label="Diện tích sử dụng"
|
|
value={property.usableAreaM2 != null ? `${property.usableAreaM2} m²` : '---'}
|
|
/>
|
|
<InfoItem label="Phòng ngủ" value={property.bedrooms != null ? `${property.bedrooms}` : '---'} />
|
|
<InfoItem label="Phòng tắm" value={property.bathrooms != null ? `${property.bathrooms}` : '---'} />
|
|
<InfoItem
|
|
label="Tầng / Tổng tầng"
|
|
value={
|
|
property.floor != null && property.totalFloors != null
|
|
? `${property.floor} / ${property.totalFloors}`
|
|
: property.floor != null
|
|
? `${property.floor}`
|
|
: property.floors != null
|
|
? `${property.floors}`
|
|
: '---'
|
|
}
|
|
/>
|
|
<InfoItem label="Hướng" value={getLabel(DIRECTIONS, property.direction) || '---'} />
|
|
<InfoItem label="Năm xây" value={property.yearBuilt ? `${property.yearBuilt}` : '---'} />
|
|
<InfoItem label="Pháp lý" value={property.legalStatus || '---'} />
|
|
<InfoItem label="Dự án" value={property.projectName || '---'} />
|
|
<InfoItem
|
|
label="Cách metro gần nhất"
|
|
value={
|
|
property.metroDistanceM != null
|
|
? property.metroDistanceM < 1000
|
|
? `${property.metroDistanceM} m`
|
|
: `${(property.metroDistanceM / 1000).toFixed(1)} km`
|
|
: '---'
|
|
}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Amenities */}
|
|
{property.amenities && property.amenities.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Tiện ích</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-2">
|
|
{property.amenities.map((a) => (
|
|
<Badge key={a} variant="secondary">
|
|
{a}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Map */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Vị trí trên bản đồ</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{property.latitude != null && property.longitude != null ? (
|
|
<>
|
|
<NeighborhoodPOIMap
|
|
center={{ lat: property.latitude, lng: property.longitude }}
|
|
pois={nearbyPois}
|
|
height="400px"
|
|
/>
|
|
<p className="mt-3 text-sm text-muted-foreground">
|
|
Tìm thấy {nearbyPois.length} điểm quan tâm trong bán kính 2 km
|
|
</p>
|
|
</>
|
|
) : (
|
|
<div className="flex h-[300px] items-center justify-center rounded-lg bg-muted">
|
|
<p className="text-sm text-muted-foreground">
|
|
Chưa có tọa độ cho tin đăng này
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Price History Chart */}
|
|
{priceHistory.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Lịch sử giá</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<PriceHistoryChart data={priceHistory} />
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Neighborhood Score Radar Chart */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Đánh giá khu vực</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{neighborhoodScore ? (
|
|
<>
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<Badge
|
|
variant={
|
|
neighborhoodScore.totalScore > 7
|
|
? 'success'
|
|
: neighborhoodScore.totalScore >= 5
|
|
? 'warning'
|
|
: 'destructive'
|
|
}
|
|
className="px-3 py-1 text-lg font-bold"
|
|
>
|
|
{neighborhoodScore.totalScore.toFixed(1)}/10
|
|
</Badge>
|
|
<span className="text-sm text-muted-foreground">Điểm tổng khu vực</span>
|
|
</div>
|
|
<NeighborhoodRadarChart
|
|
categories={mapScoreToCategories(neighborhoodScore)}
|
|
height={300}
|
|
/>
|
|
</>
|
|
) : (
|
|
<div className="flex h-[200px] items-center justify-center rounded-lg bg-muted/50">
|
|
<p className="text-sm text-muted-foreground">
|
|
Chưa có dữ liệu đánh giá khu vực này
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Contact card */}
|
|
<Card className="lg:sticky lg:top-20">
|
|
<CardHeader>
|
|
<CardTitle>Liên hệ</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">{seller.fullName}</p>
|
|
<p className="text-sm text-muted-foreground">{seller.phone}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href={`tel:${seller.phone}`}>
|
|
<Button className="w-full gap-2">
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
Gọi ngay
|
|
</Button>
|
|
</a>
|
|
<Button variant="outline" className="w-full gap-2" onClick={() => setInquiryOpen(true)}>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
Nhắn tin
|
|
</Button>
|
|
|
|
<InquiryModal
|
|
open={inquiryOpen}
|
|
onOpenChange={setInquiryOpen}
|
|
listingId={listing.id}
|
|
listingTitle={property.title}
|
|
sellerName={seller.fullName}
|
|
/>
|
|
|
|
{agent && (
|
|
<div className="border-t pt-3">
|
|
<p className="text-xs text-muted-foreground">Môi giới</p>
|
|
{agent.agency && <p className="text-sm font-medium">{agent.agency}</p>}
|
|
{listing.commissionPct != null && (
|
|
<p className="text-xs text-muted-foreground">Hoa hồng: {listing.commissionPct}%</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Social sharing + QR code */}
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<SocialShare
|
|
listingId={listing.id}
|
|
listingTitle={property.title}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* AI Estimate */}
|
|
<AiEstimateButton listingId={listing.id} />
|
|
|
|
{/* Stats */}
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="grid grid-cols-3 gap-4 text-center">
|
|
<div>
|
|
<p className="text-lg font-bold">{listing.viewCount}</p>
|
|
<p className="text-xs text-muted-foreground">Lượt xem</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-bold">{listing.saveCount}</p>
|
|
<p className="text-xs text-muted-foreground">Lượt lưu</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-bold">{listing.inquiryCount}</p>
|
|
<p className="text-xs text-muted-foreground">Liên hệ</p>
|
|
</div>
|
|
</div>
|
|
{listing.publishedAt && (
|
|
<p className="mt-3 border-t pt-3 text-center text-xs text-muted-foreground">
|
|
Đăng ngày {new Date(listing.publishedAt).toLocaleDateString('vi-VN')}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function QuickStat({ icon, label, value }: { icon: string; label: string; value: string }) {
|
|
const icons: Record<string, React.ReactNode> = {
|
|
area: (
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
|
|
</svg>
|
|
),
|
|
bed: (
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7v11m0-7h18M3 18h18M6 14h.01M6 10a2 2 0 012-2h8a2 2 0 012 2v0H6z" />
|
|
</svg>
|
|
),
|
|
bath: (
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 12h16M4 12a2 2 0 00-2 2v2a4 4 0 004 4h12a4 4 0 004-4v-2a2 2 0 00-2-2M4 12V7a3 3 0 013-3h1" />
|
|
</svg>
|
|
),
|
|
floors: (
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
),
|
|
compass: (
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 9l3 3m0 0l3-3m-3 3V6m0 6l-3 3m3-3l3 3m-3-3v6" />
|
|
</svg>
|
|
),
|
|
transit: (
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div className="text-muted-foreground">{icons[icon]}</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">{label}</p>
|
|
<p className="text-sm font-semibold">{value}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoItem({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">{label}</p>
|
|
<p className="font-medium">{value}</p>
|
|
</div>
|
|
);
|
|
}
|