blitzkit/packages/website/src/components/Countdown.tsx

import { Code, Flex, Heading, Link, Text } from "@radix-ui/themes";
import { useEffect, useState, type ReactNode } from "react";
import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
import { InlineSkeleton } from "./InlineSkeleton";

const TIME = 1792598400 * 1000;

export function Countdown({ skeleton }: MaybeSkeletonComponentProps) {
  const [timeLeft, setTimeLeft] = useState<number>(TIME - Date.now());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLeft(TIME - Date.now());
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  let string: ReactNode;

  if (timeLeft > 0) {
    const hours = Math.floor(timeLeft / (1000 * 60 * 60));
    const minutes = Math.floor((timeLeft / (1000 * 60)) % 60)
      .toString()
      .padStart(2, "0");
    const seconds = Math.floor((timeLeft / 1000) % 60)
      .toString()
      .padStart(2, "0");

    string = (
      <>
        revealed in{" "}
        <Code highContrast>
          {hours}h {minutes}m {seconds}s
        </Code>
      </>
    );
  } else {
    string = "have been revealed.";
  }

  return (
    <Flex justify="center" px="4">
      <Link
        color="gray"
        highContrast
        style={{ display: "content" }}
        href="https://preview.blitzkit.app/tanks"
        underline="none"
      >
        <Flex
          mt="3"
          px="5"
          py="4"
          style={{
            borderRadius: "var(--radius-3)",
            backgroundImage: "url(https://i.imgur.com/xgngxoy.png)",
            backgroundSize: "cover",
            backgroundPosition: "center",
            boxSizing: "border-box",
            boxShadow: "0 0 var(--space-7) var(--white-a2)",
          }}
          align="center"
          gap="5"
        >
          <img
            src="https://i.imgur.com/kXV3r3P.png"
            style={{
              height: "min(15vw, 5rem)",
              filter: "drop-shadow(0.5rem 0.5rem 1rem #00000080)",
            }}
          />

          <Flex direction="column">
            <Heading size={{ initial: "4", sm: "6" }}>
              Tier XIs {!skeleton && string}{" "}
              {skeleton && <InlineSkeleton width="10rem" />}
            </Heading>
            <Text size={{ initial: "2", sm: "3" }}>
              Get ready to go to the Tankopedia!
            </Text>
          </Flex>
        </Flex>
      </Link>
    </Flex>
  );
}