73 lines
2.5 KiB
TypeScript
73 lines
2.5 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: 110.5, latitude: -3.3 }, // Between Java and Sumatra
|
|
{ name: "WITA", offset: 8, longitude: 118.8, latitude: -2.5 }, // Between Java and Kalimantan
|
|
{ name: "WIT", offset: 9, longitude: 128.0, latitude: -2.0 }, // Between Sulawesi and Papua
|
|
]
|
|
|
|
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">
|
|
<div className="absolute -translate-x-1/2 -translate-y-1/2 pointer-events-none">
|
|
<div className="bg-black/90 border-2 border-orange-600/70 rounded-lg p-2 shadow-lg">
|
|
<div className="text-center text-orange-500 text-xs font-bold">{zone.name} / GMT+{zone.offset}</div>
|
|
<div
|
|
className="digital-clock font-mono font-bold text-amber-500 text-xl md:text-2xl tracking-wider"
|
|
style={{
|
|
textShadow: '0 0 5px rgba(255,170,0,0.7)',
|
|
fontFamily: "'Digital', monospace"
|
|
}}
|
|
>
|
|
{currentTimes[zone.name] || "00:00:00"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Marker>
|
|
))}
|
|
</>
|
|
)
|
|
}
|