mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-18 20:24: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 { AnalyticsPanel } from "@/components/map/analytics-panel";
|
||||||
import { ChatPanel } from "@/components/map/chat-panel";
|
import { ChatPanel } from "@/components/map/chat-panel";
|
||||||
import { FiltersPanel } from "@/components/map/filters-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 MapWithSearch from "@/components/map/map-with-search";
|
||||||
import { TopNavigation } from "@/components/navigation/top-navigation";
|
import { TopNavigation } from "@/components/navigation/top-navigation";
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import { BarChart2, Filter, MapPin, MessageCircle } from "lucide-react";
|
||||||
BarChart2,
|
|
||||||
Bath,
|
|
||||||
BedDouble,
|
|
||||||
Building,
|
|
||||||
Droplets,
|
|
||||||
Filter,
|
|
||||||
Home,
|
|
||||||
MapPin,
|
|
||||||
MessageCircle,
|
|
||||||
Star,
|
|
||||||
Sun,
|
|
||||||
Wind,
|
|
||||||
X,
|
|
||||||
} from "lucide-react";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useRef, useState } from "react";
|
import { useRef, useState } from "react";
|
||||||
import Draggable from "react-draggable";
|
import Draggable from "react-draggable";
|
||||||
|
|
||||||
@ -34,6 +20,7 @@ export default function MapsPage() {
|
|||||||
const analyticsRef = useRef<HTMLDivElement>(null);
|
const analyticsRef = useRef<HTMLDivElement>(null);
|
||||||
const filtersRef = useRef<HTMLDivElement>(null);
|
const filtersRef = useRef<HTMLDivElement>(null);
|
||||||
const chatRef = useRef<HTMLDivElement>(null);
|
const chatRef = useRef<HTMLDivElement>(null);
|
||||||
|
const propertyInfoRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
const handlePropertyClick = () => {
|
const handlePropertyClick = () => {
|
||||||
setShowPropertyInfo(true);
|
setShowPropertyInfo(true);
|
||||||
@ -146,118 +133,11 @@ export default function MapsPage() {
|
|||||||
|
|
||||||
{/* Property Info Panel */}
|
{/* Property Info Panel */}
|
||||||
{showPropertyInfo && (
|
{showPropertyInfo && (
|
||||||
<div className="absolute top-20 right-4 w-96 map-overlay z-20">
|
<Draggable nodeRef={propertyInfoRef as React.RefObject<HTMLElement>}>
|
||||||
<div className="map-overlay-header">
|
<div ref={propertyInfoRef}>
|
||||||
<div className="flex items-center gap-2">
|
<PropertyInfoPanel setShowPropertyInfo={setShowPropertyInfo} />
|
||||||
<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">
|
</Draggable>
|
||||||
<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>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Analytics Panel */}
|
{/* 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