57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { Card } from "@/app/_components/ui/card"
|
|
import { Clock, Moon, Sun } from "lucide-react"
|
|
|
|
interface TimelineLegendProps {
|
|
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
|
|
}
|
|
|
|
export default function TimelineLegend({
|
|
position = "bottom-right"
|
|
}: TimelineLegendProps) {
|
|
const positionClasses = {
|
|
"top-right": "top-4 right-4",
|
|
"top-left": "top-4 left-4",
|
|
"bottom-right": "bottom-4 right-4",
|
|
"bottom-left": "bottom-4 left-4"
|
|
}
|
|
|
|
return (
|
|
<Card className={`absolute z-10 bg-black/80 border-gray-700 shadow-lg p-3 ${positionClasses[position]}`}>
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="text-sm font-medium text-white mb-2 flex items-center gap-2">
|
|
<Clock className="h-4 w-4" />
|
|
<span>Incident Time Patterns</span>
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-[#FFEB3B]"></div>
|
|
<span className="text-xs text-white">Morning (5am-12pm)</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-[#FF9800]"></div>
|
|
<span className="text-xs text-white">Afternoon (12pm-5pm)</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-[#3F51B5]"></div>
|
|
<span className="text-xs text-white">Evening (5pm-9pm)</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-[#263238]"></div>
|
|
<span className="text-xs text-white">Night (9pm-5am)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-400 mt-1">
|
|
Circles show average incident time. Click for details.
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|