Timezone Clock

1"use client";
2 
3import { useEffect, useState } from "react";
4import NumberFlow from "@number-flow/react";
5 
6export function TimezoneClock({
7  timezone = "Asia/Kolkata",
8}: {
9  timezone: Intl.DateTimeFormatOptions["timeZone"];
10}) {
11  const [time, setTime] = useState<{ hours: string; minutes: string }>({
12    hours: "00",
13    minutes: "00",
14  });
15  const [timezoneOffset, setTimezoneOffset] = useState<{
16    diff: number;
17    label: string;
18  } | null>(null);
19 
20  useEffect(() => {
21    const updateTime = () => {
22      const resumeTimezone = timezone;
23      const now = new Date();
24 
25      const formatter = new Intl.DateTimeFormat("en-US", {
26        timeZone: resumeTimezone,
27        hour: "2-digit",
28        minute: "2-digit",
29        hour12: false,
30      });
31 
32      const parts = formatter.formatToParts(now);
33      const hours = parts.find((p) => p.type === "hour")?.value || "00";
34      const minutes = parts.find((p) => p.type === "minute")?.value || "00";
35 
36      setTime({ hours, minutes });
37 
38      const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
39 
40      if (userTimezone !== resumeTimezone) {
41        const getOffset = (tz: string) => {
42          const date = new Date();
43          const utcDate = new Date(
44            date.toLocaleString("en-US", { timeZone: "UTC" }),
45          );
46          const tzDate = new Date(
47            date.toLocaleString("en-US", { timeZone: tz }),
48          );
49          return (tzDate.getTime() - utcDate.getTime()) / (1000 * 60);
50        };
51 
52        const userOffset = getOffset(userTimezone);
53        const resumeOffset = getOffset(resumeTimezone);
54        const diffInMinutes = userOffset - resumeOffset;
55        const diffInHours = Math.abs(diffInMinutes / 60);
56 
57        const label =
58          diffInMinutes > 0
59            ? `${diffInHours}h ahead`
60            : `${diffInHours}h behind`;
61 
62        setTimezoneOffset({ diff: diffInHours, label });
63      } else {
64        setTimezoneOffset(null);
65      }
66    };
67 
68    updateTime();
69    const interval = setInterval(updateTime, 1000 * 60); // Update every minute
70 
71    return () => clearInterval(interval);
72  }, [timezone]);
73 
74  return (
75    <div className="flex items-center gap-2 font-mono">
76      <div className="flex items-center">
77        <NumberFlow
78          value={parseInt(time.hours)}
79          format={{ minimumIntegerDigits: 2 }}
80          className="tabular-nums"
81        />
82        <span>:</span>
83        <NumberFlow
84          value={parseInt(time.minutes)}
85// … truncated