From b854ceb989738a457f77424395de000c20c912c0 Mon Sep 17 00:00:00 2001 From: Lynn Fisher Date: Wed, 30 Apr 2025 13:08:57 -0700 Subject: [PATCH 1/7] add reactgg launch banner --- .../public/img/banner-sale-reactgg.svg | 1 + .../src/components/CountdownTimer.tsx | 89 +++++++++++ .../src/components/QueryGGBanner.astro | 139 ++++++++++++++++++ usehooks.com/src/pages/index.astro | 2 + 4 files changed, 231 insertions(+) create mode 100644 usehooks.com/public/img/banner-sale-reactgg.svg create mode 100644 usehooks.com/src/components/CountdownTimer.tsx create mode 100644 usehooks.com/src/components/QueryGGBanner.astro diff --git a/usehooks.com/public/img/banner-sale-reactgg.svg b/usehooks.com/public/img/banner-sale-reactgg.svg new file mode 100644 index 0000000..9aee0dd --- /dev/null +++ b/usehooks.com/public/img/banner-sale-reactgg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/usehooks.com/src/components/CountdownTimer.tsx b/usehooks.com/src/components/CountdownTimer.tsx new file mode 100644 index 0000000..72ea4d4 --- /dev/null +++ b/usehooks.com/src/components/CountdownTimer.tsx @@ -0,0 +1,89 @@ +import { Fragment, useEffect, useState } from "react"; + +interface CountdownProps { + targetDate: string; // YYYY-MM-DD format +} + +interface TimeLeft { + days: number; + hours: number; + minutes: number; + seconds: number; +} + +function calculateTimeLeft(targetDate: string): TimeLeft { + const target = new Date(`${targetDate}T00:00:00-08:00`); + const now = new Date(); + const difference = +target - +now; + + if (difference <= 0) { + return { + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }; + } + + return { + days: Math.floor(difference / (1000 * 60 * 60 * 24)), + hours: Math.floor((difference / (1000 * 60 * 60)) % 24), + minutes: Math.floor((difference / 1000 / 60) % 60), + seconds: Math.floor((difference / 1000) % 60), + }; +} + +const formatNumber = (number: number) => number.toString().padStart(2, "0"); + +const Countdown: React.FC = ({ targetDate }) => { + const [timeLeft, setTimeLeft] = useState( + calculateTimeLeft(targetDate) + ); + + useEffect(() => { + const timer = setInterval(() => { + const newTimeLeft = calculateTimeLeft(targetDate); + setTimeLeft(newTimeLeft); + if ( + newTimeLeft.days === 0 && + newTimeLeft.hours === 0 && + newTimeLeft.minutes === 0 && + newTimeLeft.seconds === 0 + ) { + clearInterval(timer); + } + }, 1000); + + return () => clearInterval(timer); + }, [targetDate]); + + if ( + timeLeft.days === 0 && + timeLeft.hours === 0 && + timeLeft.minutes === 0 && + timeLeft.seconds === 0 + ) { + return null; + } + + return ( +
+ {["days", "hours", "minutes", "seconds"].map((unit, index) => ( + + {index > 0 && :} +
+ + {formatNumber(timeLeft[unit as keyof TimeLeft]).charAt(0)} + + + {formatNumber(timeLeft[unit as keyof TimeLeft]).charAt(1)} + +

{unit}

+
+ + ))} +
+ ); +}; + +export default Countdown; diff --git a/usehooks.com/src/components/QueryGGBanner.astro b/usehooks.com/src/components/QueryGGBanner.astro new file mode 100644 index 0000000..c0bc9a0 --- /dev/null +++ b/usehooks.com/src/components/QueryGGBanner.astro @@ -0,0 +1,139 @@ +--- +import Button from "./Button.astro"; +import CountdownTimer from "./CountdownTimer"; +--- + + + + diff --git a/usehooks.com/src/pages/index.astro b/usehooks.com/src/pages/index.astro index d9846b7..79a0229 100644 --- a/usehooks.com/src/pages/index.astro +++ b/usehooks.com/src/pages/index.astro @@ -5,6 +5,7 @@ import NavMain from "../sections/NavMain.astro"; import HomeHero from "../sections/HomeHero.astro"; import HooksList from "../components/search/HooksList"; import Footer from "../sections/Footer.astro"; +import QueryGGBanner from "../components/QueryGGBanner.astro"; const hooks = await getCollection("hooks"); --- @@ -13,6 +14,7 @@ const hooks = await getCollection("hooks"); title="useHooks – The React Hooks Library" description="A collection of modern, server-safe React hooks – from the ui.dev team" > + From 31d2ebc11d22a4eb11bfd1950b57b8a977aeff4e Mon Sep 17 00:00:00 2001 From: Tyler McGinnis <2933430+tylermcginnis@users.noreply.github.com> Date: Sun, 4 May 2025 21:18:12 -0600 Subject: [PATCH 2/7] stuff --- .../src/components/QueryGGBanner.astro | 71 +++++++++---------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/usehooks.com/src/components/QueryGGBanner.astro b/usehooks.com/src/components/QueryGGBanner.astro index c0bc9a0..71b740c 100644 --- a/usehooks.com/src/components/QueryGGBanner.astro +++ b/usehooks.com/src/components/QueryGGBanner.astro @@ -4,32 +4,32 @@ import CountdownTimer from "./CountdownTimer"; --- + + From fe723f8eb27915284039bf6b42eec6469b18015d Mon Sep 17 00:00:00 2001 From: Tyler McGinnis <2933430+tylermcginnis@users.noreply.github.com> Date: Sun, 4 May 2025 21:25:26 -0600 Subject: [PATCH 3/7] update percent off --- usehooks.com/src/components/QueryGGBanner.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/usehooks.com/src/components/QueryGGBanner.astro b/usehooks.com/src/components/QueryGGBanner.astro index 71b740c..74c8a12 100644 --- a/usehooks.com/src/components/QueryGGBanner.astro +++ b/usehooks.com/src/components/QueryGGBanner.astro @@ -16,7 +16,7 @@ import CountdownTimer from "./CountdownTimer";

react.gg Launch Sale

-

Up to 25% off through May 16th

+

Up to 30% off through May 16th