From 740651eef190806b0677007e1936596efa6a22d9 Mon Sep 17 00:00:00 2001 From: wont-stream Date: Wed, 29 Jan 2025 18:48:00 -0500 Subject: [PATCH] Add countdown component and integrate it into the App; update package.json to include react-countdown --- bun.lockb | Bin 9004 -> 12244 bytes package.json | 1 + src/components/App.tsx | 25 ++++++++++++++++++++---- src/components/Countdown/IconAnchor.css | 16 +++++++++++++++ src/components/Countdown/index.tsx | 18 +++++++++++++++++ 5 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 src/components/Countdown/IconAnchor.css create mode 100644 src/components/Countdown/index.tsx diff --git a/bun.lockb b/bun.lockb index 2025bc0b4d16fa6ad0e67fb2e1f4358d333374f2..97b3a9d346bc5da0cc5165dd71551d8d1c51fdf7 100644 GIT binary patch delta 3437 zcmc&%dstM*6~Fg#7ue;oyxHZki=fEEy|BDrE(RZs@Qj``28nh-hi3VS_hzU}BqyZGs8m-WXJ#&}4V88s=?`sd=%chL{^LzGO>~2r+T;xNrBHgQ$ zYTcx|20>($737rW=Mn3n!-OEVoCP!oEG$-~XOx zrY_k*5ri4EwScC8Sq3`42pDexZ5)N!-V@f^6SU4S0f-ll6>pdBDRg)j{p;HsjCFmY0cNMXy|RStKeNYXM!rO0qx z>mF3JQ4~I*-kS7w?GJqe;@U6vCEh!-ZePalR>@kb&1Qw4m+rAmN$==9;Fh?pw?*>S zG68k7XiNPYe%?b(+l9TohJ|Pa*+*6(Pb!k^L24?J5|HQ^rLbH8hqDA?fwLgs90)^n zhn$OCC}VytSi-?#4Lv?=&kgADpV?z(1jDco3?#(h=Z*a=qM&y^^uk9WjG>@G(t|ZL zfFTSFaLV`#OdGC)Aqos|ummikH}GvBrUhUik(>(V=R*sRr@4@*qXuY%Qcz4ZaYDNz=_#Vu>7}(=g@6j z`+wWHZsV~2|9Iz|*G51srS{$wTcjdbJYu2t-=tIopGoU%7bHeUkn6p^T?|Y482yOU0H$M|auXE&J04w-yx* zm5sFSdOT(lsO~6`C=;}0n<5yuQlcGfjNgjIox{s(AsZ z(nO^FI5J#d7{mYWaN>J8RVyqX8h>xH{P}2{q`rFM9h1vVb6ZN!{dMKSl{LNl$ImX* zZdF#fJ*z6QZv1C@<=FEk`FQb+=-@@r3;o^J&WlAs(tF!aZ}Vz>&{O_3c{sJ>^3F8| zTasHBR`t`#tNE@!$)AeV%c%RucLzVtC_4A8@$6fM_ZlmI6MlWsrhFtb6=|CrtfMMy z8Y}bcg?{me6IX8feBi>7uH)jG9g@ro$`@G${gdxLT+==K>QKt~9II8A=6Lq^CtElx z&lJU_?-^X1I3qgzgW-g(_dXes`)c)zb^C|gjnCdFE_1pW?BzkZ(-DvM?(Vyv_KzsH zl=pXciz}@Ly4MCu4E$ov|MnmyY1Zz5$FW6=y#%+>ZBx;ki?1hbR?@dG_wFQ!!C`n7S4QeZN2Wo2+YN{k{&|au*(J<6@=nXR^X^%dDT7;fJ zEk;Ytm81juE!2)^9BL<&AXJjh=u@aAZKQ=a2@eEq&OOPQd1@xN1SMFsqXm|x)Hz;T zoaJM>ZG}|_Dae^32AiZP#x4ThU1IW;PVhnETdirzL*#-E+AT}O&-5%P5-8Z>1_ish zLUDnDr+{0Ny_wPahDS$)7iHaW!>}LrDFO44s90o=lCJr0l-w=``rWkCj zIClIR7~@TXw9ZDI_7nD)5^?N-B2)bse@RA2I!Hgfl zQ7DdWSdfbOF7iN_JRb@sSsWjkws3TdVdOSeFplMIe3;$yp49_aiiA~|fB=GcLZdjbD2StfdwqVf%l!}YLn(5zpD!c#V?sDW z$k#;tc_iUL7gz!rzaS=nn4nRkSmeYpyzj^T*WGtBplFyo6wL4i4bfGYo1=unr}cGG z#g#+T4jgHWlznQP`>kYb+LC67Bo3k=j%9w<924oJ4EboYRU>qvoz%e z=%C{xA2vf|`aU1ofA+}OgkwsxHxw3Y3XxDU%TqTdOOvnn23>|z0sg?TBr`{qRhFkJ zMnz7JHmtYaQ|E>9oup2BH!$jTnJ(9`LpWYgR$5W0Dglq_h76KB1U@aSl&8^@sAQ^w z_3F1PG#R<7%u-o;Nr^hU0I!UC9F1)7P+h$064_LG;mO@za|fr_+A=mpv0uc@CBSWF zQ^uw^jw96{@7-n7CKpI<&~i&;rJ8jr)avN$IHechNc1`^0B&vhPA_?a1^6EokVQWD OKB7Nv%xi)hv-aP&Q$wx* delta 1486 zcmb_cZAg?^6u$S)jHA}*jHBZ?8M@;reX!%qlsZlBDE(;7*(m#Z(a65oOxu=S(kWhbi*9~DRYGC?+{zy?71^p7~18gA#`=u?`b6(%cAG$vl_Q1K%x#yhw z-gEDL-t&BW|LU{;#gWi;*Oo=^A`jYb?YX&r@Zzf-HNOr2F?G(G`sMGw*2m+Qyh0aO zk5;lI>YAPivFpf>dk^pbLA1d!Pl)&cFb81bk-_!VMfUFbOQg{3;NI#7~>3L;7h%zLbaPwyKkNXhPMg zkAfnms0vC-TB52`(j*`?4N}pujHs$tlmwhnGzoa2C}NE&mx+!6Hkv4DjaoLKh-OMz zS6cprwOO}>MTjQdYJ#;+xB9+VW3blhzS;~SV!CxIZK>f5n#_uH@tIjA6nCN{?nIZl zkn?O%M%=H!)d{;XcK}%!Ii3g2gnFPXb70rM1?Kd#^ZzYa)A#u=70+4Ntdk{*=AV%C zmpvveG-1~$oMWSHj+nI4?+%SdF|*~xWEM5&Y1Er*qZDTID9fo)gWX2^oiS;n+fGg9 zkRxA{xzvu)PWLf7sHi}bd2|q?lLj&7(^oD{79=`dOC`lsJ`E@{9dKu6HiDPTcN%i_ zB}$7L&Dn9|e>v}>uS;q@Q=g`V&%}{?M%Z0Qp2`a9FY!gdZ;=lzfZ`v}-xU9Vp6&!P z7jmJ@1?E8mFMtf_pXlOcOd~54)MLU5&{v=`ojOb(rV1nbSeY_RMU<|;HY1n7+cBk> zUc6O$TP|V5*tXkviR{{~q3Uf%Xsq;oAz#69_sYrkQ=9fE`5m(Hm3SN3ylaco?P1N6 z_d{m~z8$g4)?mP2*$4-YE3hNZI;mSAs|(>NwKjJFfZ_Pr@HDYFdvSNNABa@9otl(~!3ohA3f#S10T zCw(&sLnaFN+|^%NQFUU~-N)mtGYRQtmFjP(E7ro7XCfXmo%FeV>F&1qO#M&S8ef&o zBs?`P&%S_?zE$VS1D}L`@ls>?&-A){G!a@nY{~BRPWvx; LK^z~|SDyb2mOTNN 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