38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
"use client"
|
|
import { Checkbox } from "@/app/_components/ui/checkbox"
|
|
import { Label } from "@/app/_components/ui/label"
|
|
import { Overlay } from "../overlay"
|
|
import { ControlPosition } from "mapbox-gl"
|
|
|
|
|
|
interface TimeControlsProps {
|
|
onTimeChange: (time: string) => void
|
|
activeTime: string
|
|
position?: ControlPosition
|
|
}
|
|
|
|
export default function TimeControls({ onTimeChange, activeTime, position = "bottom-left" }: TimeControlsProps) {
|
|
const times = [
|
|
{ id: "today", label: "Hari ini" },
|
|
{ id: "yesterday", label: "Kemarin" },
|
|
{ id: "week", label: "Minggu" },
|
|
{ id: "month", label: "Bulan" },
|
|
]
|
|
|
|
return (
|
|
<Overlay position={position}>
|
|
<div className="bg-black/75 rounded-md p-2 flex items-center space-x-4">
|
|
<div className="text-white font-medium mr-2">Waktu</div>
|
|
{times.map((time) => (
|
|
<div key={time.id} className="flex items-center space-x-2">
|
|
<Checkbox id={time.id} checked={activeTime === time.id} onCheckedChange={() => onTimeChange(time.id)} />
|
|
<Label htmlFor={time.id} className="text-white text-sm cursor-pointer">
|
|
{time.label}
|
|
</Label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Overlay>
|
|
)
|
|
}
|