From 42712746eb747fc6bc968ec4e5bc73f512c47140 Mon Sep 17 00:00:00 2001
From: darkicewolf50 <darkicewolf50@gmail.com>
Date: Sat, 28 Jun 2025 13:35:26 -0600
Subject: [PATCH] feat(CountDownTimer): added from different branch manually

---
 src/CountDown/CountDownTimer.css |  66 ++++++++++++++++
 src/CountDown/CountDownTimer.jsx | 124 +++++++++++++++++++++++++++++++
 2 files changed, 190 insertions(+)
 create mode 100644 src/CountDown/CountDownTimer.css
 create mode 100644 src/CountDown/CountDownTimer.jsx

diff --git a/src/CountDown/CountDownTimer.css b/src/CountDown/CountDownTimer.css
new file mode 100644
index 0000000..7c89d58
--- /dev/null
+++ b/src/CountDown/CountDownTimer.css
@@ -0,0 +1,66 @@
+#afterTime #counter {
+	color: black;
+	background-color: red;
+}
+
+#counter.dangerDays {
+	background-color: red;
+}
+
+#counter {
+	display: flex;
+	flex-direction: row;
+	padding: 0.5svh 1svw;
+	text-align: center;
+	background-color: whitesmoke;
+	border: 2px solid black;
+	border-radius: 1rem;
+	justify-content: space-evenly;
+	font-size: x-large;
+}
+
+#counter div {
+	display: flex;
+	flex-direction: row;
+}
+
+#counter div p {
+	padding-left: 1svw;
+}
+
+#counter .countdown-link {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	font-weight: 700;
+	font-size: 1.25rem;
+	line-height: 1.75rem;
+	padding: 0.5rem;
+	border: 1px solid #ebebeb;
+	border-radius: 1rem;
+	text-decoration: none;
+	color: #000;
+}
+
+#counter .countdown {
+	line-height: 1.25svb;
+	padding: 0.75rem 0.75rem;
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+}
+
+#counter .countdownDanger {
+	color: #ff0000;
+}
+
+.countDownTimer a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.countDownTimer {
+	width: fit-content;
+	margin: 0.5svh 1svw;
+}
diff --git a/src/CountDown/CountDownTimer.jsx b/src/CountDown/CountDownTimer.jsx
new file mode 100644
index 0000000..3ddbe31
--- /dev/null
+++ b/src/CountDown/CountDownTimer.jsx
@@ -0,0 +1,124 @@
+import { useEffect, useState } from "react";
+import "./CountDownTimer.css";
+
+/**
+ * @param {Date} dateFinished - Date object with time that it finishes Date(year, monthNumber, day, hour, minute, second)
+ * @param {React.JSX.Element} messageDisplayAfter - Message to display afterwards
+ * @param {React.JSX.Element} messageDisplayBefore - The Message to display while it is counting down
+ * @returns {React.JSX.Element} page - returns the page content
+ * @description A fun countdown timer of how many days, minutesz and seconds until x happens
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+export default function CountDownTimer({
+	dateFinished,
+	messageDisplayAfter,
+	messageDisplayBefore,
+}) {
+	const [days, hours, minutes, seconds] = useCountdown(dateFinished);
+	if (days + hours + minutes + seconds <= 0) {
+		return (
+			<div
+				id="afterTime"
+				className="countDownTimer">
+				<ShowCounter
+					days={days}
+					hours={hours}
+					minutes={minutes}
+					seconds={seconds}
+				/>
+				{messageDisplayAfter}
+			</div>
+		);
+	} else {
+		return (
+			<div
+				id="countDownTimer"
+				className="countDownTimer">
+				<ShowCounter
+					days={days}
+					hours={hours}
+					minutes={minutes}
+					seconds={seconds}
+				/>
+				{messageDisplayBefore}
+			</div>
+		);
+	}
+}
+
+const useCountdown = (DateDone) => {
+	const countDownDate = new Date(DateDone).getTime();
+
+	const [countDown, setCountDown] = useState(
+		countDownDate - new Date().getTime()
+	);
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setCountDown(countDownDate - new Date().getTime());
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, [countDownDate]);
+
+	return getReturnValues(countDown);
+};
+
+const getReturnValues = (countDown) => {
+	let days = Math.floor(countDown / (1000 * 60 * 60 * 24));
+	let hours = Math.floor(
+		(countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+	);
+	let minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
+	let seconds = Math.floor((countDown % (1000 * 60)) / 1000);
+	if (days < 0) {
+		days = 0;
+	}
+	if (hours < 0) {
+		hours = 0;
+	}
+	if (minutes < 0) {
+		minutes = 0;
+	}
+	if (seconds < 0) {
+		seconds = 0;
+	}
+	return [days, hours, minutes, seconds];
+};
+
+const ShowCounter = ({ days, hours, minutes, seconds }) => {
+	let dangerDays = days > 10 ? "" : "dangerDays";
+	return (
+		<div
+			className={dangerDays}
+			id="counter">
+			<DateTimeDisplay
+				valueAwayFrom={days}
+				discriptor={"Days"}
+			/>
+			<p>:</p>
+			<DateTimeDisplay
+				valueAwayFrom={hours}
+				discriptor={"Hours"}
+			/>
+			<p>:</p>
+			<DateTimeDisplay
+				valueAwayFrom={minutes}
+				discriptor={"Mins"}
+			/>
+			<p>:</p>
+			<DateTimeDisplay
+				valueAwayFrom={seconds}
+				discriptor={"Seconds"}
+			/>
+		</div>
+	);
+};
+
+const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => {
+	return (
+		<div>
+			<p>{valueAwayFrom}</p>
+			<p>{discriptor}</p>
+		</div>
+	);
+};