39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Card } from "@/app/_components/ui/card"
|
|
import { CRIME_COLORS, CRIME_RATES } from "@/app/_utils/const/crime"
|
|
|
|
type MapLegendProps = {
|
|
title?: string
|
|
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
|
|
}
|
|
|
|
export default function MapLegend({ title = "Crime Rate Legend", position = "bottom-right" }: MapLegendProps) {
|
|
// Define position classes
|
|
const positionClasses = {
|
|
"top-left": "top-4 left-4",
|
|
"top-right": "top-4 right-4",
|
|
"bottom-left": "bottom-4 left-4",
|
|
"bottom-right": "bottom-4 right-4",
|
|
}
|
|
|
|
return (
|
|
<div className={`absolute ${positionClasses[position]} z-10`}>
|
|
<Card className="p-3 shadow-md bg-white/90 backdrop-blur-sm">
|
|
<div className="text-sm font-medium mb-1">{title}</div>
|
|
<div className="space-y-1">
|
|
{Object.entries(CRIME_RATES).map(([key, label]) => (
|
|
<div key={key} className="flex items-center gap-2">
|
|
<div
|
|
className="w-4 h-4 rounded-sm"
|
|
style={{ backgroundColor: CRIME_COLORS[key as keyof typeof CRIME_COLORS] }}
|
|
/>
|
|
<span className="text-xs">{label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|