mukeshs/rotaryclubofvellore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: countdown

Browse Source
This commit is contained in:
mukeshs
2026-07-03 09:32:34 +05:30
parent 016eb0e19b
commit 25b9c8e1f2
2 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Countdown.tsx
+37 -20
View File
@@ -2,7 +2,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
const TARGET = new Date("2026-07-03T18:30:00+05:30").getTime(); const TARGET = new Date("2026-07-03T19:30:00+05:30").getTime();
function getParts(msLeft: number) { function getParts(msLeft: number) {
const clamped = Math.max(msLeft, 0); const clamped = Math.max(msLeft, 0);
@@ -16,36 +16,53 @@ function getParts(msLeft: number) {
export default function Countdown() { export default function Countdown() {
const [parts, setParts] = useState<ReturnType<typeof getParts> | null>(null); const [parts, setParts] = useState<ReturnType<typeof getParts> | null>(null);
const [isDone, setIsDone] = useState(false);
useEffect(() => { useEffect(() => {
const tick = () => setParts(getParts(TARGET - Date.now())); const tick = () => {
const msLeft = TARGET - Date.now();
setParts(getParts(msLeft));
if (msLeft <= 0) {
setIsDone(true);
}
};
tick(); tick();
const id = setInterval(tick, 1000); const id = setInterval(tick, 1000);
return () => clearInterval(id); return () => clearInterval(id);
}, []); }, []);
// Don't render anything until we know the state, and hide entirely once done.
if (parts === null || isDone) {
return null;
}
const units = [ const units = [
{ label: "Days", value: parts?.days }, { label: "Days", value: parts.days },
{ label: "Hours", value: parts?.hours }, { label: "Hours", value: parts.hours },
{ label: "Min", value: parts?.minutes }, { label: "Min", value: parts.minutes },
{ label: "Sec", value: parts?.seconds }, { label: "Sec", value: parts.seconds },
]; ];
return ( return (
<div className="flex gap-2.5 sm:gap-3" aria-live="polite"> <div>
{units.map((u) => ( <p className="mb-2.5 text-xs font-medium uppercase tracking-wider text-white/50">
<div Counting down to installation
key={u.label} </p>
className="flex w-14 flex-col items-center rounded-xl border border-white/10 bg-white/5 py-2 backdrop-blur-sm sm:w-16" <div className="flex gap-2.5 sm:gap-3" aria-live="polite">
> {units.map((u) => (
<span className="font-serif text-xl font-semibold tabular-nums text-white sm:text-2xl"> <div
{u.value !== undefined ? String(u.value).padStart(2, "0") : "--"} key={u.label}
</span> className="flex w-14 flex-col items-center rounded-xl border border-white/10 bg-white/5 py-2 backdrop-blur-sm sm:w-16"
<span className="text-[10px] uppercase tracking-wider text-white/60"> >
{u.label} <span className="font-serif text-xl font-semibold tabular-nums text-white sm:text-2xl">
</span> {String(u.value).padStart(2, "0")}
</div> </span>
))} <span className="text-[10px] uppercase tracking-wider text-white/60">
{u.label}
</span>
</div>
))}
</div>
</div> </div>
); );
} }
src/components/Hero.tsx
+1 -4
View File
@@ -99,10 +99,7 @@ export default function Hero() {
</div> </div>
</div> </div>
<div className="mt-8"> <div className="empty:mt-0 mt-8">
<p className="mb-2.5 text-xs font-medium uppercase tracking-wider text-white/50">
Counting down to installation
</p>
<Countdown /> <Countdown />
</div> </div>
</div> </div>