25 lines
1.0 KiB
TypeScript
25 lines
1.0 KiB
TypeScript
import { CRIME_RATE_COLORS } from "@/app/_utils/const/map";
|
|
import { Overlay } from "../overlay";
|
|
import { ControlPosition } from "mapbox-gl";
|
|
|
|
interface MapLegendProps {
|
|
position?: ControlPosition
|
|
}
|
|
|
|
export default function MapLegend({ position = "bottom-right" }: MapLegendProps) {
|
|
return (
|
|
// <Overlay position={position}>
|
|
<div className="flex flex-row text-xs font-semibold font-sans text-white">
|
|
<div className={`flex items-center gap-1.5 py-0 px-8 rounded-l-md border-y border-1 `} style={{ backgroundColor: `${CRIME_RATE_COLORS.low}` }}>
|
|
<span>Low</span>
|
|
</div>
|
|
<div className={`flex items-center gap-1.5 py-0 px-8 border-y border-1 `} style={{ backgroundColor: `${CRIME_RATE_COLORS.medium}` }}>
|
|
<span>Medium</span>
|
|
</div>
|
|
<div className={`flex items-center gap-1.5 py-0 px-8 rounded-r-md border-y border-1 `} style={{ backgroundColor: `${CRIME_RATE_COLORS.high}` }}>
|
|
<span>High</span>
|
|
</div>
|
|
</div>
|
|
// </Overlay>
|
|
)
|
|
} |