countdown

This commit is contained in:
tresabhi committed 2026-11-03 09:26:32 -06:00
1 parent cdcec8548a
commit de4094554e
2 files changed
+11 -5

No files matched your search

@@ -3,7 +3,8 @@ import { useEffect, useState, type ReactNode } from "react";
import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps"; import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
import { InlineSkeleton } from "./InlineSkeleton"; import { InlineSkeleton } from "./InlineSkeleton";
const TIME = 1792598400 * 1000; const TIME = 1793898000 * 1000;
const HREF = "https://preview.blitzkit.app/tanks";
export function Countdown({ skeleton }: MaybeSkeletonComponentProps) { export function Countdown({ skeleton }: MaybeSkeletonComponentProps) {
const [timeLeft, setTimeLeft] = useState<number>(TIME - Date.now()); const [timeLeft, setTimeLeft] = useState<number>(TIME - Date.now());
@@ -31,7 +32,7 @@ export function Countdown({ skeleton }: MaybeSkeletonComponentProps) {
string = ( string = (
<> <>
revealed in{" "} in{" "}
<Code highContrast> <Code highContrast>
{hours}h {minutes}m {seconds}s {hours}h {minutes}m {seconds}s
</Code> </Code>
@@ -47,7 +48,7 @@ export function Countdown({ skeleton }: MaybeSkeletonComponentProps) {
color="gray" color="gray"
highContrast highContrast
style={{ display: "content" }} style={{ display: "content" }}
href="https://preview.blitzkit.app/tanks" href={timeLeft <= 0 ? HREF : undefined}
underline="none" underline="none"
> >
<Flex <Flex
@@ -75,11 +76,11 @@ export function Countdown({ skeleton }: MaybeSkeletonComponentProps) {
<Flex direction="column"> <Flex direction="column">
<Heading size={{ initial: "4", sm: "6" }}> <Heading size={{ initial: "4", sm: "6" }}>
Tier XIs {!skeleton && string}{" "} More Tier XIs {!skeleton && string}{" "}
{skeleton && <InlineSkeleton width="10rem" />} {skeleton && <InlineSkeleton width="10rem" />}
</Heading> </Heading>
<Text size={{ initial: "2", sm: "3" }}> <Text size={{ initial: "2", sm: "3" }}>
Get ready to go to the Tankopedia! Catch the next 2 tanks on BlitzKit Preview
</Text> </Text>
</Flex> </Flex>
</Flex> </Flex>
@@ -6,6 +6,7 @@ import { literals } from "@blitzkit/i18n/src/literals";
import { Box, Flex, Link } from "@radix-ui/themes"; import { Box, Flex, Link } from "@radix-ui/themes";
import { AesonPlug } from "../../../components/AesonPlug"; import { AesonPlug } from "../../../components/AesonPlug";
import { Beg } from "../../../components/Beg"; import { Beg } from "../../../components/Beg";
import { Countdown } from "../../../components/Countdown";
import HomeHero from "../../../components/HomeHero.astro"; import HomeHero from "../../../components/HomeHero.astro";
import { Plugs } from "../../../components/Plugs"; import { Plugs } from "../../../components/Plugs";
import ToolCard from "../../../components/ToolCard.astro"; import ToolCard from "../../../components/ToolCard.astro";
@@ -66,6 +67,10 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, () => {
<BaseLayout {locale}> <BaseLayout {locale}>
<HomeHero /> <HomeHero />
<Countdown client:only="react">
<Countdown skeleton slot="fallback" />
</Countdown>
<Beg /> <Beg />
{ {