diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/stats/[slug].tsx | 144 |
1 files changed, 69 insertions, 75 deletions
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); |