diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/SubscriberTable/SubscriberTable.tsx | 153 |
1 files changed, 83 insertions, 70 deletions
diff --git a/src/components/SubscriberTable/SubscriberTable.tsx b/src/components/SubscriberTable/SubscriberTable.tsx index 5a84055..43c8c16 100644 --- a/src/components/SubscriberTable/SubscriberTable.tsx +++ b/src/components/SubscriberTable/SubscriberTable.tsx @@ -2,83 +2,96 @@ 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; + diff_1d: number; + diff_7d: number; + diff_30d: 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> - <h2 className="text-xl text-gray-800">Click on a row to view more details!</h2> - <p className="text-gray-500 text-sm">Updated Hourly. Retrieved at: {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> + <h2 className="text-xl text-gray-800"> + Click on a row to view more details! + </h2> + <p className="text-gray-500 text-sm"> + Updated Hourly. Retrieved at: {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; |