mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-18 12:14:05 +01:00
feat: add PropertyInfoPanel component to MapsPage for detailed property information display
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB
parent
01abdb2c5d
commit
14babe21d9
@ -3,26 +3,12 @@
|
||||
import { AnalyticsPanel } from "@/components/map/analytics-panel";
|
||||
import { ChatPanel } from "@/components/map/chat-panel";
|
||||
import { FiltersPanel } from "@/components/map/filters-panel";
|
||||
import { PropertyInfoPanel } from "@/components/map/property-info-panel";
|
||||
|
||||
import MapWithSearch from "@/components/map/map-with-search";
|
||||
import { TopNavigation } from "@/components/navigation/top-navigation";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
BarChart2,
|
||||
Bath,
|
||||
BedDouble,
|
||||
Building,
|
||||
Droplets,
|
||||
Filter,
|
||||
Home,
|
||||
MapPin,
|
||||
MessageCircle,
|
||||
Star,
|
||||
Sun,
|
||||
Wind,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { BarChart2, Filter, MapPin, MessageCircle } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import Draggable from "react-draggable";
|
||||
|
||||
@ -34,6 +20,7 @@ export default function MapsPage() {
|
||||
const analyticsRef = useRef<HTMLDivElement>(null);
|
||||
const filtersRef = useRef<HTMLDivElement>(null);
|
||||
const chatRef = useRef<HTMLDivElement>(null);
|
||||
const propertyInfoRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handlePropertyClick = () => {
|
||||
setShowPropertyInfo(true);
|
||||
@ -146,118 +133,11 @@ export default function MapsPage() {
|
||||
|
||||
{/* Property Info Panel */}
|
||||
{showPropertyInfo && (
|
||||
<div className="absolute top-20 right-4 w-96 map-overlay z-20">
|
||||
<div className="map-overlay-header">
|
||||
<div className="flex items-center gap-2">
|
||||
<Building className="h-5 w-5 text-primary" />
|
||||
<span className="font-medium">Property Details</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => setShowPropertyInfo(false)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<Draggable nodeRef={propertyInfoRef as React.RefObject<HTMLElement>}>
|
||||
<div ref={propertyInfoRef}>
|
||||
<PropertyInfoPanel setShowPropertyInfo={setShowPropertyInfo} />
|
||||
</div>
|
||||
<div className="map-overlay-content">
|
||||
<div className="relative mb-4">
|
||||
<img
|
||||
src="/placeholder.svg?height=200&width=400"
|
||||
alt="Property"
|
||||
className="w-full h-40 object-cover rounded-md"
|
||||
/>
|
||||
<div className="absolute top-2 left-2 flex gap-1">
|
||||
<Badge className="bg-primary">Condominium</Badge>
|
||||
<Badge className="bg-amber-500">
|
||||
<Star className="h-3 w-3 mr-1" /> Premium
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-medium text-lg mb-1">Modern Condominium</h3>
|
||||
<div className="flex items-center text-muted-foreground text-sm mb-2">
|
||||
<MapPin className="h-3.5 w-3.5 mr-1 flex-shrink-0" />
|
||||
<span className="truncate">Sukhumvit, Bangkok</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm mb-3">
|
||||
<div className="flex items-center">
|
||||
<BedDouble className="h-4 w-4 mr-1 text-primary" />
|
||||
<span>3 Beds</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Bath className="h-4 w-4 mr-1 text-primary" />
|
||||
<span>2 Baths</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Home className="h-4 w-4 mr-1 text-primary" />
|
||||
<span>150 m²</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="font-semibold text-lg mb-4">฿15,000,000</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-medium text-sm mb-2">
|
||||
Environmental Factors
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="flex flex-col items-center p-2 border rounded-md">
|
||||
<Droplets className="h-5 w-5 text-blue-500 mb-1" />
|
||||
<span className="text-xs font-medium">Flood Risk</span>
|
||||
<Badge className="mt-1 text-xs bg-amber-500">
|
||||
Moderate
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-2 border rounded-md">
|
||||
<Wind className="h-5 w-5 text-purple-500 mb-1" />
|
||||
<span className="text-xs font-medium">Air Quality</span>
|
||||
<Badge className="mt-1 text-xs bg-destructive">Poor</Badge>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-2 border rounded-md">
|
||||
<Sun className="h-5 w-5 text-amber-500 mb-1" />
|
||||
<span className="text-xs font-medium">Noise</span>
|
||||
<Badge className="mt-1 text-xs bg-green-500">Low</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-medium text-sm mb-2">Nearby Facilities</h4>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>BTS Phrom Phong</span>
|
||||
<span className="text-muted-foreground">300m</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>EmQuartier Mall</span>
|
||||
<span className="text-muted-foreground">500m</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Benchasiri Park</span>
|
||||
<span className="text-muted-foreground">700m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Link href="/properties/prop1" className="flex-1">
|
||||
<Button className="w-full">View Details</Button>
|
||||
</Link>
|
||||
<Link href="/price-prediction" className="flex-1">
|
||||
<Button variant="outline" className="w-full">
|
||||
Price Analysis
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Draggable>
|
||||
)}
|
||||
|
||||
{/* Analytics Panel */}
|
||||
|
||||
134
frontend/components/map/property-info-panel.tsx
Normal file
134
frontend/components/map/property-info-panel.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import {
|
||||
Bath,
|
||||
BedDouble,
|
||||
Building,
|
||||
Droplets,
|
||||
Home,
|
||||
Link,
|
||||
MapPin,
|
||||
Star,
|
||||
Sun,
|
||||
Wind,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Badge } from "../ui/badge";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
export function PropertyInfoPanel({
|
||||
setShowPropertyInfo,
|
||||
}: {
|
||||
setShowPropertyInfo: (show: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="absolute top-20 right-4 w-96 map-overlay z-20 bg-background p-5 rounded-md overflow-y-auto scrollbar-hide cursor-grab">
|
||||
<div className="map-overlay-header">
|
||||
<div className="flex justify-between w-full items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Building className="h-5 w-5 text-primary" />
|
||||
<span className="font-medium">Property Details</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => setShowPropertyInfo(false)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="map-overlay-content mt-2">
|
||||
<div className="relative mb-4">
|
||||
<img
|
||||
src="/map.png?height=200&width=400"
|
||||
alt="Property"
|
||||
className="w-full h-40 object-cover rounded-md"
|
||||
/>
|
||||
<div className="absolute top-2 left-2 flex gap-1">
|
||||
<Badge className="bg-primary">Condominium</Badge>
|
||||
<Badge className="bg-amber-500">
|
||||
<Star className="h-3 w-3 mr-1" /> Premium
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-medium text-lg mb-1">Modern Condominium</h3>
|
||||
<div className="flex items-center text-muted-foreground text-sm mb-2">
|
||||
<MapPin className="h-3.5 w-3.5 mr-1 flex-shrink-0" />
|
||||
<span className="truncate">Sukhumvit, Bangkok</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm mb-3">
|
||||
<div className="flex items-center">
|
||||
<BedDouble className="h-4 w-4 mr-1 text-primary" />
|
||||
<span>3 Beds</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Bath className="h-4 w-4 mr-1 text-primary" />
|
||||
<span>2 Baths</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Home className="h-4 w-4 mr-1 text-primary" />
|
||||
<span>150 m²</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="font-semibold text-lg mb-4">฿15,000,000</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-medium text-sm mb-2">Environmental Factors</h4>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="flex flex-col items-center p-2 border rounded-md">
|
||||
<Droplets className="h-5 w-5 text-blue-500 mb-1" />
|
||||
<span className="text-xs font-medium">Flood Risk</span>
|
||||
<Badge className="mt-1 text-xs bg-amber-500">Moderate</Badge>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-2 border rounded-md">
|
||||
<Wind className="h-5 w-5 text-purple-500 mb-1" />
|
||||
<span className="text-xs font-medium">Air Quality</span>
|
||||
<Badge className="mt-1 text-xs bg-destructive">Poor</Badge>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-2 border rounded-md">
|
||||
<Sun className="h-5 w-5 text-amber-500 mb-1" />
|
||||
<span className="text-xs font-medium">Noise</span>
|
||||
<Badge className="mt-1 text-xs bg-green-500">Low</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-medium text-sm mb-2">Nearby Facilities</h4>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>BTS Phrom Phong</span>
|
||||
<span className="text-muted-foreground">300m</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>EmQuartier Mall</span>
|
||||
<span className="text-muted-foreground">500m</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Benchasiri Park</span>
|
||||
<span className="text-muted-foreground">700m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Link href="/properties/prop1" className="flex-1">
|
||||
<Button className="w-full">View Details</Button>
|
||||
</Link>
|
||||
<Link href="/price-prediction" className="flex-1">
|
||||
<Button variant="outline" className="w-full">
|
||||
Price Analysis
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user