homarr/packages/widgets/src/clock/component.tsx

"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { Flex, Stack, Text } from "@mantine/core";
import dayjs from "dayjs";
import advancedFormat from "dayjs/plugin/advancedFormat";
import timezones from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";

import type { WidgetComponentProps } from "../definition";

dayjs.extend(advancedFormat);
dayjs.extend(utc);
dayjs.extend(timezones);

export default function ClockWidget({ options }: WidgetComponentProps<"clock">) {
  const secondsFormat = options.showSeconds ? ":ss" : "";
  const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `h:mm${secondsFormat} A`;
  const dateFormat = options.dateFormat;
  const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
  const time = useCurrentTime(options);
  return (
    <Flex classNames={{ root: "clock-wrapper" }} align="center" justify="center" h="100%">
      <Stack classNames={{ root: "clock-text-stack" }} align="center" gap="xs">
        {options.customTitleToggle && (
          <Text classNames={{ root: "clock-customTitle-text" }}>{options.customTitle}</Text>
        )}
        <Text classNames={{ root: "clock-time-text" }} fw={700} size="2.125rem" lh="1">
          {dayjs(time).tz(timezone).format(timeFormat)}
        </Text>
        {options.showDate && (
          <Text classNames={{ root: "clock-date-text" }} lineClamp={1}>
            {dayjs(time).tz(timezone).format(dateFormat)}
          </Text>
        )}
      </Stack>
    </Flex>
  );
}

interface UseCurrentTimeProps {
  showSeconds: boolean;
}

const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
  const [time, setTime] = useState(new Date());
  const timeoutRef = useRef<NodeJS.Timeout>();
  const intervalRef = useRef<NodeJS.Timeout>();
  const intervalMultiplier = useMemo(() => (showSeconds ? 1 : 60), [showSeconds]);

  useEffect(() => {
    setTime(new Date());
    timeoutRef.current = setTimeout(
      () => {
        setTime(new Date());

        intervalRef.current = setInterval(() => {
          setTime(new Date());
        }, intervalMultiplier * 1000);
      },
      intervalMultiplier * 1000 - (1000 * (showSeconds ? 0 : dayjs().second()) + dayjs().millisecond()),
    );

    return () => {
      clearTimeout(timeoutRef.current);
      clearInterval(intervalRef.current);
    };
  }, [intervalMultiplier, showSeconds]);

  return time;
};