59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
import { AlertCircle, AlertTriangle, PackageX, ShieldAlert, Siren } from "lucide-react"
|
|
import { CRIME_RATE_COLORS } from "@/app/_utils/const/map"
|
|
|
|
export function MapLegend() {
|
|
return (
|
|
<div className="absolute bottom-20 right-2 bg-black/75 p-3 rounded-md z-10 text-white text-sm">
|
|
<div className="font-medium mb-2">Crime Rates</div>
|
|
<div className="space-y-1 mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="inline-block w-4 h-4 rounded-sm" style={{ backgroundColor: CRIME_RATE_COLORS.low }}></span>
|
|
<span>Low</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className="inline-block w-4 h-4 rounded-sm"
|
|
style={{ backgroundColor: CRIME_RATE_COLORS.medium }}
|
|
></span>
|
|
<span>Medium</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="inline-block w-4 h-4 rounded-sm" style={{ backgroundColor: CRIME_RATE_COLORS.high }}></span>
|
|
<span>High</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className="inline-block w-4 h-4 rounded-sm"
|
|
style={{ backgroundColor: CRIME_RATE_COLORS.critical }}
|
|
></span>
|
|
<span>Critical</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="font-medium mb-2">Incident Types</div>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<AlertCircle size={16} className="text-red-500" />
|
|
<span>General</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<PackageX size={16} className="text-amber-500" />
|
|
<span>Theft</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Siren size={16} className="text-blue-500" />
|
|
<span>Accident</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<ShieldAlert size={16} className="text-purple-500" />
|
|
<span>Violence</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle size={16} className="text-orange-500" />
|
|
<span>Juvenile</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|