66 lines
2.7 KiB
TypeScript
66 lines
2.7 KiB
TypeScript
"use client"
|
|
import { Button } from "@/app/_components/ui/button"
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/app/_components/ui/tooltip"
|
|
import {
|
|
Thermometer,
|
|
Droplets,
|
|
Wind,
|
|
Cloud,
|
|
Eye,
|
|
Clock,
|
|
AlertTriangle,
|
|
MapIcon,
|
|
BarChart3,
|
|
Users,
|
|
Siren,
|
|
} from "lucide-react"
|
|
|
|
interface MapControlsProps {
|
|
onControlChange: (control: string) => void
|
|
activeControl: string
|
|
}
|
|
|
|
export default function MapControls({ onControlChange, activeControl }: MapControlsProps) {
|
|
const controls = [
|
|
{ id: "crime-rate", icon: <Thermometer size={20} />, label: "Crime Rate" },
|
|
{ id: "theft", icon: <Droplets size={20} />, label: "Theft" },
|
|
{ id: "violence", icon: <Wind size={20} />, label: "Violence" },
|
|
{ id: "vandalism", icon: <Cloud size={20} />, label: "Vandalism" },
|
|
{ id: "traffic", icon: <Eye size={20} />, label: "Traffic" },
|
|
{ id: "time", icon: <Clock size={20} />, label: "Time Analysis" },
|
|
{ id: "alerts", icon: <AlertTriangle size={20} className="text-amber-500" />, label: "Alerts" },
|
|
{ id: "districts", icon: <MapIcon size={20} />, label: "Districts" },
|
|
{ id: "statistics", icon: <BarChart3 size={20} />, label: "Statistics" },
|
|
{ id: "demographics", icon: <Users size={20} />, label: "Demographics" },
|
|
{ id: "emergency", icon: <Siren size={20} />, label: "Emergency" },
|
|
]
|
|
|
|
return (
|
|
<div className="absolute top-0 left-0 z-10 bg-black/75 rounded-md m-2 p-1 flex items-center space-x-1">
|
|
<TooltipProvider>
|
|
{controls.map((control) => (
|
|
<Tooltip key={control.id}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant={activeControl === control.id ? "default" : "ghost"}
|
|
size="icon"
|
|
className={`h-8 w-8 rounded-md ${activeControl === control.id
|
|
? "bg-white text-black hover:bg-white/90"
|
|
: "text-white hover:bg-white/10"
|
|
}`}
|
|
onClick={() => onControlChange(control.id)}
|
|
>
|
|
{control.icon}
|
|
<span className="sr-only">{control.label}</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>{control.label}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
))}
|
|
</TooltipProvider>
|
|
</div>
|
|
)
|
|
}
|