show total viewcount on personal page channel card

2 files changed, 8 insertions, 2 deletions

diff --git a/src/components/channel-card.tsx b/src/components/channel-card.tsx
index 839cde6..b66a6e0 100644
--- a/src/components/channel-card.tsx
+++ b/src/components/channel-card.tsx
@@ -8,6 +8,7 @@ interface ChannelCardProps {
   avatarUrl: string
   subscriberCount: number
   videoCount: number
+  viewCount: number
   suborg: string
   nextMilestone: string
   nextMilestoneDays: string
@@ -15,7 +16,7 @@ interface ChannelCardProps {
 }
 
 export function ChannelCard(props: ChannelCardProps) {
-  const { channel_id, name, avatarUrl, subscriberCount, videoCount, suborg, nextMilestone, nextMilestoneDays, nextMilestoneDate } = props
+  const { channel_id, name, avatarUrl, subscriberCount, videoCount, viewCount, suborg, nextMilestone, nextMilestoneDays, nextMilestoneDate } = props
   return (
     <Card className="w-[500px] shadow-lg rounded-lg overflow-hidden mt-4 py-4">
       <CardHeader>
@@ -33,13 +34,17 @@ export function ChannelCard(props: ChannelCardProps) {
       <CardContent className="px-4 py-2 space-y-4">
         <div className="flex flex-col items-center">
           <span className="text-l text-gray-600">Subscribers</span>
-            <span className="font-semibold">{subscriberCount.toLocaleString()}</span>
+            <span className="font-semibold">{Number(subscriberCount).toLocaleString()}</span>
         </div>
         <div className="flex flex-col items-center">
           <span className="text-l text-gray-600">Videos</span>
           <span className="font-semibold">{videoCount}</span>
         </div>
         <div className="flex flex-col items-center">
+          <span className="text-l text-gray-600">View Count</span>
+          <span className="font-semibold">{Number(viewCount).toLocaleString()}</span>
+        </div>
+        <div className="flex flex-col items-center">
           <span className="text-l text-gray-600">Next Milestone</span>
           <span className="font-semibold">{Number(nextMilestone).toLocaleString()}</span>
           <div className="flex justify-center items-center">
diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index 87e85ab..908a9f8 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -62,6 +62,7 @@ function Page({ chartData, channelData, sevenDayGraphData, slug }: { chartData:
               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}