2 files changed, 75 insertions, 1 deletions

diff --git a/src/components/ChannelCard/ChannelCard.tsx b/src/components/ChannelCard/ChannelCard.tsx
index 8f4fa07..44541ad 100644
--- a/src/components/ChannelCard/ChannelCard.tsx
+++ b/src/components/ChannelCard/ChannelCard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
+import Countdown from '../Countdown';
 
 type ChannelCardProps = {
   channel_id: string;
@@ -78,8 +79,11 @@ const ChannelCard: React.FC<ChannelCardProps> = ({
           Next Milestone: {Number(nextMilestone).toLocaleString()}
         </p>
         <p className="text-xs sm:text-sm text-gray-300">
-          Estimated in {nextMilestoneDays} days ({nextMilestoneDate})
+          Estimated Date: {nextMilestoneDate}
         </p>
+        <div className="flex justify-center">
+          <Countdown targetDate={nextMilestoneDate} />
+        </div>
       </div>
       <button
         onClick={() => window.open(`https://youtube.com/channel/${channel_id}`, '_blank')}
diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
new file mode 100644
index 0000000..69e4bd0
--- /dev/null
+++ b/src/components/Countdown.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+
+interface CountdownProps {
+  targetDate: string;
+}
+
+const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
+  const calculateTimeLeft = () => {
+    const difference = new Date(targetDate).getTime() - new Date().getTime();
+    let timeLeft = {
+      days: '0',
+      hours: '0',
+      minutes: '0',
+      seconds: '0',
+    };
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)).toString(),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24).toString(),
+        minutes: Math.floor((difference / 1000 / 60) % 60).toString(),
+        seconds: Math.floor((difference / 1000) % 60).toString(),
+      };
+    }
+
+    return timeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState({
+    days: '--',
+    hours: '--',
+    minutes: '--',
+    seconds: '--',
+  });
+
+  useEffect(() => {
+    setTimeLeft(calculateTimeLeft());
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
+
+  return (
+    <div className="bg-gray-700 text-white font-sans">
+      <div className="flex gap-2 text-2xl font-bold">
+        <div className="flex flex-col items-center">
+          <div className="text-4xl">{timeLeft.days}</div>
+          <div className="text-xs uppercase">Days</div>
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="text-4xl">{timeLeft.hours}</div>
+          <div className="text-xs uppercase">Hours</div>
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="text-4xl">{timeLeft.minutes}</div>
+          <div className="text-xs uppercase">Minutes</div>
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="text-4xl">{timeLeft.seconds}</div>
+          <div className="text-xs uppercase">Seconds</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Countdown;
\ No newline at end of file