Add countdown component and integrate it into the App; update package.json to include react-countdown

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"
 	},

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 (
 		<div class="container">
-			<Hero title="This is not a CDN." waves="header" />
+			<Hero
+				waves="header"
+				title="This is not a CDN."
+				paragraph={`Coming ${new Date().getFullYear() + 1}`}
+				links={[<Countdown key="countdown"
+					date={Date.now() + 2000}
+					intervalDelay={0}
+					precision={1000}
+					zeroPadTime={2}
+					renderer={props => <span>{props.total.toString().padStart(10, "0")} ms..</span>}
+					onComplete={() => {
+						window.location.replace("https://ipv4.army");
+					}}
+					/>]}
+			/>
+			{/*
 			<hr />
 			<Hero
 				title="This, is Audiophile, Basshead and Techie."
@@ -46,6 +62,7 @@ export default () => {
 				]}
 				waves="footer"
 			/>
+			*/}
 		</div>
 	);
 };

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;
+}

src/components/Countdown/index.tsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from "preact/hooks";
+
+// biome-ignore lint/complexity/noBannedTypes: <explanation>
+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 <div>{timeLeft}ms remaining</div>;
+  };