From 1ab5215a4294c2bd80443a14088fcd79cbd97d16 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 5 Oct 2024 16:19:16 -0700
Subject: add countdown timer to date in next milestone projection

---
 src/pages/stats/[slug].tsx | 144 ++++++++++++++++++++++-----------------------
 1 file changed, 69 insertions(+), 75 deletions(-)

(limited to 'src/pages')
diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index 8288dbf..f70fd69 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -7,6 +7,7 @@ import Footer from "@/components/Footer/Footer";
 import ChannelCard from "@/components/ChannelCard/ChannelCard"
 import Head from "next/head";
 import TitleBar from "../../components/TitleBar/TitleBar";
+import Countdown from "@/components/Countdown";
 
 interface ChannelDataProp {
 	channel_id: string;
@@ -56,90 +57,83 @@ function Page({
 	sevenDayGraphData,
 	slug,
 	milestoneData,
-}: {
+  }: {
 	chartData: GraphDataProp;
 	channelData: ChannelDataProp;
 	sevenDayGraphData: GraphDataProp;
 	slug: string;
 	milestoneData: CompactTableProps;
-}) {
-	console.log(milestoneData);
+  }) {
 	return (
-		<>
-			<Head>
-				<title>{slug as string} - PhaseTracker</title>
-				<meta
-					property="og:title"
-					content={`${slug as string} - PhaseTracker`}
-				/>
-				<meta
-					name="description"
-					content={`Belonging to ${channelData.sub_org} with ${channelData.subscribers} subscribers`}
-				/>
-				<meta
-					name="og:description"
-					content={`${channelData.sub_org} - ${channelData.subscribers}`}
-				/>
-				<meta property="og:image" content={`${channelData.profile_pic}`} />
-				<meta
-					name="viewport"
-					content="width=device-width, initial-scale=1.0"
-				></meta>
-				<meta name="author" content="Pinapelz"></meta>
-			</Head>
-			<TitleBar
-				title={slug as string}
-				redirectUrl="/"
-				showHomeButton
-				backgroundColor="black"
-			/>
-			<div className="flex justify-center px-12 ">
-				<ChannelCard
-					channel_id={channelData.channel_id}
-					name={channelData.channel_name}
-					avatarUrl={channelData.profile_pic}
-					subscriberCount={channelData.subscribers}
-					videoCount={channelData.video_count}
-					viewCount={channelData.view_count}
-					suborg={channelData.sub_org}
-					nextMilestone={channelData.next_milestone}
-					nextMilestoneDays={channelData.days_until_next_milestone}
-					nextMilestoneDate={channelData.next_milestone_date}
-				/>
+	  <>
+		<Head>
+		  <title>{slug as string} - PhaseTracker</title>
+		  <meta property="og:title" content={`${slug as string} - PhaseTracker`} />
+		  <meta
+			name="description"
+			content={`Belonging to ${channelData.sub_org} with ${channelData.subscribers} subscribers`}
+		  />
+		  <meta
+			name="og:description"
+			content={`${channelData.sub_org} - ${channelData.subscribers}`}
+		  />
+		  <meta property="og:image" content={`${channelData.profile_pic}`} />
+		  <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
+		  <meta name="author" content="Pinapelz"></meta>
+		</Head>
+		<TitleBar
+		  title={slug as string}
+		  redirectUrl="/"
+		  showHomeButton
+		  backgroundColor="black"
+		/>
+		<div className="flex justify-center px-12">
+		  <ChannelCard
+			channel_id={channelData.channel_id}
+			name={channelData.channel_name}
+			avatarUrl={channelData.profile_pic}
+			subscriberCount={channelData.subscribers}
+			videoCount={channelData.video_count}
+			viewCount={channelData.view_count}
+			suborg={channelData.sub_org}
+			nextMilestone={channelData.next_milestone}
+			nextMilestoneDays={channelData.days_until_next_milestone}
+			nextMilestoneDate={channelData.next_milestone_date}
+		  />
+		</div>
+		<div className="hidden sm:block">
+		  <Divider text="Individual Data" description="Data before collection start date are not shown" />
+		  <div className="px-48 mb-10 mt-10">
+			<div className="mb-12">
+			  <DataChart
+				overrideBGColor="black"
+				overrideBorderColor="black"
+				chartData={chartData}
+			  />
 			</div>
-			<div className="hidden sm:block">
-				<Divider text="Individual Data" description="Data before collection start date are not shown" />
-				<div className="px-48 mb-10 mt-10">
-					<div className="mb-12">
-						<DataChart
-							overrideBGColor="black"
-							overrideBorderColor="black"
-							chartData={chartData}
-						/>
-					</div>
-					<div className="mb-12">
-						<DataChart
-							chartData={sevenDayGraphData}
-							overrideBGColor="black"
-							overrideBorderColor="black"
-							graphTitle="7 Day Historical"
-						/>
-					</div>
-				</div>
-				<Divider text="Milestones" description="Approximations are shown for milestones before data collection started" />
-					<div className="mb-12 mx-24">
-						<CompactTable
-							tableData={{
-								dates: milestoneData.dates,
-								milestones: milestoneData.milestones,
-							}}
-						/>
-					</div>
+			<div className="mb-12">
+			  <DataChart
+				chartData={sevenDayGraphData}
+				overrideBGColor="black"
+				overrideBorderColor="black"
+				graphTitle="7 Day Historical"
+			  />
 			</div>
-			<Footer />
-		</>
+		  </div>
+		  <Divider text="Historical Milestones" description="Approximations are shown for milestones before data collection started" />
+		  <div className="mb-12 mx-24">
+			<CompactTable
+			  tableData={{
+				dates: milestoneData.dates,
+				milestones: milestoneData.milestones,
+			  }}
+			/>
+		  </div>
+		</div>
+		<Footer />
+	  </>
 	);
-}
+  }
 
 async function getGraphData(slug: string) {
 	const encodedSlug = encodeURIComponent(slug as string);
-- 
cgit v1.2.3

