feat: add clocks in footer

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.11",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",

src/constants/time.js

@@ -0,0 +1,5 @@
+export const SECOND = 1000;
+export const MINUTE = 60 * SECOND;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
+export const WEEK = 7 * DAY;

src/layout/footer.jsx

@@ -1,5 +1,44 @@
 import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import { MINUTE } from "../constants/time";
 import { cn } from "../utils/cn";
+import { formatTime } from "../utils/format-time";
+
+function useLocalTime() {
+  const [flipFlop, setFlipFlop] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => {
+        setFlipFlop(!flipFlop);
+      },
+      MINUTE - (Date.now() % MINUTE),
+    );
+
+    return () => clearTimeout(timer);
+  }, [flipFlop]);
+
+  return formatTime();
+}
+
+function useEorzeanTime() {
+  const [flipFlop, setFlipFlop] = useState(false);
+
+  const eorzeanFactor = 144 / 7;
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => {
+        setFlipFlop(!flipFlop);
+      },
+      (MINUTE - ((Date.now() * eorzeanFactor) % MINUTE)) / eorzeanFactor,
+    );
+
+    return () => clearTimeout(timer);
+  }, [flipFlop, eorzeanFactor]);
+
+  return formatTime(Date.now() * eorzeanFactor, true);
+}
 
 function SubFooter({ className, children }) {
   return (
@@ -31,15 +70,51 @@ SubFooter.propTypes = {
   ]),
 };
 
+function LabeledTime({ children, label = "", pad = false }) {
+  const time = String(children);
+
+  if (!/^\d{1,2}:\d{2}$/.test(time)) return null;
+
+  return (
+    <div className="tabular-nums">
+      {label && (
+        <>
+          <b>{label}</b>{" "}
+        </>
+      )}
+      {pad && time.length < 5 && "0"}
+      {children}
+    </div>
+  );
+}
+
+LabeledTime.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string,
+  pad: PropTypes.bool,
+};
+
 export default function Footer() {
+  const localTime = useLocalTime();
+  const eorzeanTime = useEorzeanTime();
+
   return (
     <footer className="flex flex-col text-sm">
-      <SubFooter className="bg-zinc-600">
+      <SubFooter className="bg-zinc-600 tabular-nums">
+        <LabeledTime label="ET" pad>
+          {eorzeanTime}
+        </LabeledTime>
+        <LabeledTime label="LT" pad>
+          {localTime}
+        </LabeledTime>
+      </SubFooter>
+      <SubFooter className="bg-zinc-700">
         <div>Made by CostasAK</div>
         <div>Support me</div>
+        <div>Discord</div>
         <div>Source</div>
       </SubFooter>
-      <SubFooter className="bg-zinc-700 text-neutral-400">
+      <SubFooter className="bg-zinc-800 text-neutral-400">
         <div>© SQUARE ENIX CO., LTD. All Rights Reserved.</div>
         <div>
           FINAL FANTASY is a registered trademark of Square Enix Holdings Co.,

src/utils/format-time.js

@@ -0,0 +1,19 @@
+import dayjs from "dayjs";
+import dayjsUtc from "dayjs/plugin/utc";
+
+export function formatTime(time = Date.now(), utc = false) {
+  const hourParts = new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+  }).formatToParts(new Date(time));
+
+  if (utc) {
+    dayjs.extend(dayjsUtc);
+  }
+
+  const timeObject = utc ? dayjs(time).utc() : dayjs(time);
+
+  if (hourParts.dayPeriod !== undefined) {
+    return timeObject.format("h:mm A");
+  }
+  return timeObject.format("H:mm");
+}