66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Marker } from "react-map-gl/mapbox"
|
|
|
|
interface TimeZoneMarker {
|
|
name: string
|
|
offset: number
|
|
longitude: number
|
|
latitude: number
|
|
}
|
|
|
|
const TIME_ZONES: TimeZoneMarker[] = [
|
|
{ name: "WIB", offset: 7, longitude: 106.8456, latitude: -6.2088 }, // Jakarta
|
|
{ name: "WITA", offset: 8, longitude: 115.1889, latitude: -8.4095 }, // Denpasar
|
|
{ name: "WIT", offset: 9, longitude: 140.7887, latitude: -2.5916 }, // Jayapura
|
|
]
|
|
|
|
export default function TimeZonesDisplay() {
|
|
const [currentTimes, setCurrentTimes] = useState<Record<string, string>>({})
|
|
|
|
useEffect(() => {
|
|
const updateTimes = () => {
|
|
const now = new Date()
|
|
const times: Record<string, string> = {}
|
|
|
|
TIME_ZONES.forEach((zone) => {
|
|
const localTime = new Date(now.getTime())
|
|
localTime.setHours(now.getUTCHours() + zone.offset)
|
|
|
|
const hours = localTime.getHours().toString().padStart(2, "0")
|
|
const minutes = localTime.getMinutes().toString().padStart(2, "0")
|
|
const seconds = localTime.getSeconds().toString().padStart(2, "0")
|
|
|
|
times[zone.name] = `${hours}:${minutes}:${seconds}`
|
|
})
|
|
|
|
setCurrentTimes(times)
|
|
}
|
|
|
|
// Update immediately and then every second
|
|
updateTimes()
|
|
const interval = setInterval(updateTimes, 1000)
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
{TIME_ZONES.map((zone) => (
|
|
<Marker key={zone.name} longitude={zone.longitude} latitude={zone.latitude}>
|
|
<div className="relative group">
|
|
<div className="absolute -translate-x-1/2 -translate-y-full mb-2 pointer-events-none">
|
|
<div className="bg-black/80 text-white px-2 py-1 rounded-md text-xs font-mono">
|
|
<div className="text-center font-bold">{zone.name}</div>
|
|
<div className="digital-clock">{currentTimes[zone.name] || "00:00:00"}</div>
|
|
<div className="text-center text-xs text-gray-300">GMT+{zone.offset}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Marker>
|
|
))}
|
|
</>
|
|
)
|
|
}
|