diff --git a/bun.lockb b/bun.lockb index 2025bc0..97b3a9d 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index d12aa6e..1281e00 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "modern-normalize": "^3.0.1", "preact": "^10.25.4", "react": "npm:@preact/compat", + "react-countdown": "^2.3.6", "react-dom": "npm:@preact/compat", "react-icons": "^5.4.0" }, diff --git a/src/components/App.tsx b/src/components/App.tsx index c6cdb94..765c5dc 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,15 +1,31 @@ import Hero from "./Hero"; -import IconAnchor from "./IconAnchor"; +//import IconAnchor from "./IconAnchor"; +import Countdown from "react-countdown"; -import { Music } from "lucide-preact"; -import { SiGithub, SiForgejo, SiInstagram } from "react-icons/si"; +//import { /*Music,*/ Globe } from "lucide-preact"; +//import { SiGithub, SiForgejo, SiInstagram } from "react-icons/si"; import "./App.css"; export default () => { return (
- + {props.total.toString().padStart(10, "0")} ms..} + onComplete={() => { + window.location.replace("https://ipv4.army"); + }} + />]} + /> + {/*
{ ]} waves="footer" /> + */}
); }; diff --git a/src/components/Countdown/IconAnchor.css b/src/components/Countdown/IconAnchor.css new file mode 100644 index 0000000..a2b07ba --- /dev/null +++ b/src/components/Countdown/IconAnchor.css @@ -0,0 +1,16 @@ +.IconAnchor { + margin: 5px; +} + +a { + color: #dcdcdc; + text-decoration: none; +} + +a:hover { + color: #808080; +} + +a:active { + color: #a9a9a9; +} diff --git a/src/components/Countdown/index.tsx b/src/components/Countdown/index.tsx new file mode 100644 index 0000000..3afbe7d --- /dev/null +++ b/src/components/Countdown/index.tsx @@ -0,0 +1,18 @@ +import { useState, useEffect } from "preact/hooks"; + +// biome-ignore lint/complexity/noBannedTypes: +export default (props: { timeInSeconds: number, callBack?: Function }) => { + const [timeLeft, setTimeLeft] = useState(props.timeInSeconds * 1000); // Convert to milliseconds + + useEffect(() => { + if (timeLeft <= 1) return props?.callBack?.(); + + const timer = setInterval(() => { + setTimeLeft((prev) => prev - 1); // Decrease by 1ms + }, 0); + + return () => clearInterval(timer); + }, [timeLeft, props?.callBack]); + + return
{timeLeft}ms remaining
; + }; \ No newline at end of file