Page MenuHomeSealhub
Files F10359977

countdown.jdd.tsx
No OneTemporary
Actions

countdown.jdd.tsx
View Options

import { TempstreamJSX } from "tempstream";
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import { calculateDifference } from "./difference.js";
const component_arguments = {
date: new ComponentArguments.ShortText().setExampleValues(["2025-08-05"]),
} as const;
function renderBlock({
number,
unit,
unit_label,
}: {
number: number;
unit: "day" | "hour" | "minute" | "second";
unit_label: string;
}) {
return (
<div class="countdown-number" data-unit={unit}>
<div class="countdown-number__digits" data-countdown-target={unit}>
{unit == "second" || unit == "minute"
? number.toString().padStart(2, "0")
: number}
</div>
<div class="countdown-number__unit">{unit_label}</div>
</div>
);
}
export class Countdown extends Component<typeof component_arguments> {
getArguments() {
return component_arguments;
}
async toHTML({
args: { date },
classes,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
const { days, hours, minutes, seconds } = calculateDifference(date);
return (
<div
class={["countdown", ...classes]}
data-controller="countdown"
data-countdown-date-value={date}
>
<div class="countdown__wrapper">
{renderBlock({ number: days, unit: "day", unit_label: "days" })}
{renderBlock({ number: hours, unit: "hour", unit_label: "hours" })}
<span class="separator">:</span>
{renderBlock({
number: minutes,
unit: "minute",
unit_label: "minutes",
})}
<span
class="separator separator--seconds"
data-countdown-target="ticker"
>
:
</span>
{renderBlock({
number: seconds,
unit: "second",
unit_label: "seconds",
})}
</div>
</div>
);
}
}

File Metadata

Mime Type
text/x-java
Expires
Sat, Nov 8, 03:34 (19 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1033973
Default Alt Text
countdown.jdd.tsx (1 KB)

Event Timeline