diff options
Diffstat (limited to 'src/components/SubscriberTable')
| -rw-r--r-- | src/components/SubscriberTable/SubscriberTable.tsx | 123 | ||||
| -rw-r--r-- | src/components/SubscriberTable/SubscriberTableRow.tsx | 70 |
2 files changed, 110 insertions, 83 deletions
diff --git a/src/components/SubscriberTable/SubscriberTable.tsx b/src/components/SubscriberTable/SubscriberTable.tsx index b07c75d..05080ca 100644 --- a/src/components/SubscriberTable/SubscriberTable.tsx +++ b/src/components/SubscriberTable/SubscriberTable.tsx @@ -2,67 +2,82 @@ import React from "react"; import ChannelRow from "./SubscriberTableRow"; interface ChannelDataProp { - channel_name: string; - profile_pic: string; - subscribers: number; - sub_org: string; - video_count: number; - day_diff: number; - views: number; + channel_name: string; + profile_pic: string; + subscribers: number; + sub_org: string; + video_count: number; + day_diff: number; + views: number; } interface SubscriberDataTableProp { - channel_data: ChannelDataProp[]; - timestamp: string; + channel_data: ChannelDataProp[]; + timestamp: string; } const DataTable = ({ channel_data, timestamp }: SubscriberDataTableProp) => { - if (!channel_data) { - return null; - } + if (!channel_data) { + return null; + } -return ( - <> - <div className="text-center sm:mt-5"> - <h1 className="text-2xl font-bold text-gray-800">Subscriber Count</h1> - <p className="text-gray-500 text-sm">Last Updated: {timestamp}</p> - </div> - <div className="px-2 sm:px-48 py-4 sm:py-8 relative rounded-l text-left overflow-auto"> - <table className="w-full text-m sm:text-xl text-black bg-white"> - <thead className="text-m sm:text-lg text-white rounded-md" style={{ backgroundColor: 'black' }}> - <tr> - <th scope="col" className="py-1 px-1 sm:px-3 hidden sm:table-cell"> - RANK - </th> - <th scope="col" className="py-1 px-1 sm:px-3"> - CHANNEL - </th> - <th scope="col" className="py-1 px-1 sm:px-3 hidden sm:table-cell"> - GROUP - </th> - <th scope="col" className="py-1 px-1 sm:px-3 hidden sm:table-cell"> - VIDEO COUNT - </th> - <th scope="col" className="py-1 px-1 sm:px-3 hidden sm:table-cell"> - VIEW COUNT - </th> - <th scope="col" className="py-1 px-1 sm:px-3"> - SUBSCRIBERS - </th> - <th scope="col" className="py-1 px-1 sm:px-3"> - DIFF (24H) - </th> - </tr> - </thead> - <tbody> - {channel_data.map((channel, index) => ( - <ChannelRow key={index} channel={channel} index={index} /> - ))} - </tbody> - </table> - </div> - </> -); + return ( + <> + <div className="text-center sm:mt-5"> + <h1 className="text-2xl font-bold text-gray-800">Subscriber Count</h1> + <p className="text-gray-500 text-sm">Last Updated: {timestamp}</p> + </div> + <div className="px-2 sm:px-48 py-4 sm:py-8 relative rounded-l text-left overflow-auto"> + <table className="w-full text-m sm:text-xl text-black bg-white"> + <thead + className="text-m sm:text-lg text-white rounded-md" + style={{ backgroundColor: "black" }} + > + <tr> + <th + scope="col" + className="py-1 px-1 sm:px-3 hidden sm:table-cell" + > + RANK + </th> + <th scope="col" className="py-1 px-1 sm:px-3"> + CHANNEL + </th> + <th + scope="col" + className="py-1 px-1 sm:px-3 hidden sm:table-cell" + > + GROUP + </th> + <th + scope="col" + className="py-1 px-1 sm:px-3 hidden sm:table-cell" + > + VIDEO COUNT + </th> + <th + scope="col" + className="py-1 px-1 sm:px-3 hidden sm:table-cell" + > + VIEW COUNT + </th> + <th scope="col" className="py-1 px-1 sm:px-3"> + SUBSCRIBERS + </th> + <th scope="col" className="py-1 px-1 sm:px-3"> + DIFF (24H) + </th> + </tr> + </thead> + <tbody> + {channel_data.map((channel, index) => ( + <ChannelRow key={index} channel={channel} index={index} /> + ))} + </tbody> + </table> + </div> + </> + ); }; export default DataTable; diff --git a/src/components/SubscriberTable/SubscriberTableRow.tsx b/src/components/SubscriberTable/SubscriberTableRow.tsx index 040c693..595a2c1 100644 --- a/src/components/SubscriberTable/SubscriberTableRow.tsx +++ b/src/components/SubscriberTable/SubscriberTableRow.tsx @@ -1,36 +1,48 @@ -"use client" -import React from 'react'; -import Image from 'next/image'; -import { ChannelDataProp } from './SubscriberTable'; +"use client"; +import Image from "next/image"; +import type React from "react"; +import type { ChannelDataProp } from "./SubscriberTable"; interface ChannelRowProps { - channel: ChannelDataProp; - index: number; + channel: ChannelDataProp; + index: number; } const ChannelRow: React.FC<ChannelRowProps> = ({ channel, index }) => ( -<tr key={index} className="border-b hover:bg-gray-100 cursor-pointer" onClick={() => window.location.href = "/stats/"+channel.channel_name}> - <td className="py-3 px-1 sm:px-3 hidden sm:table-cell">{index + 1}</td> - <td className="py-3 px-1 sm:px-3 flex items-center"> - <Image - src={channel.profile_pic} - alt={channel.channel_name} - width={50} - height={50} - className="rounded-full" - /> - <span className="ml-2"> - {channel.channel_name} - </span> - </td> - <td className="py-3 px-1 sm:px-3 hidden sm:table-cell">{channel.sub_org}</td> - <td className="py-3 px-1 sm:px-3 hidden sm:table-cell">{channel.video_count}</td> - <td className="py-3 px-1 sm:px-3 hidden sm:table-cell">{Number(channel.views).toLocaleString()}</td> - <td className="py-3 px-1 sm:px-3">{Number(channel.subscribers).toLocaleString()}</td> - <td className="py-3 px-1 sm:px-3"> - {channel.day_diff > 0 ? `+${Number(channel.day_diff).toLocaleString()}` : Number(channel.day_diff).toLocaleString()} - </td> - </tr> + <tr + key={index} + className="border-b hover:bg-gray-100 cursor-pointer" + onClick={() => (window.location.href = "/stats/" + channel.channel_name)} + > + <td className="py-3 px-1 sm:px-3 hidden sm:table-cell">{index + 1}</td> + <td className="py-3 px-1 sm:px-3 flex items-center"> + <Image + src={channel.profile_pic} + alt={channel.channel_name} + width={50} + height={50} + className="rounded-full" + /> + <span className="ml-2">{channel.channel_name}</span> + </td> + <td className="py-3 px-1 sm:px-3 hidden sm:table-cell"> + {channel.sub_org} + </td> + <td className="py-3 px-1 sm:px-3 hidden sm:table-cell"> + {channel.video_count} + </td> + <td className="py-3 px-1 sm:px-3 hidden sm:table-cell"> + {Number(channel.views).toLocaleString()} + </td> + <td className="py-3 px-1 sm:px-3"> + {Number(channel.subscribers).toLocaleString()} + </td> + <td className="py-3 px-1 sm:px-3"> + {channel.day_diff > 0 + ? `+${Number(channel.day_diff).toLocaleString()}` + : Number(channel.day_diff).toLocaleString()} + </td> + </tr> ); -export default ChannelRow;
\ No newline at end of file +export default ChannelRow; |