diff options
Diffstat (limited to 'src/app/_componenets/SubscriberTable')
| -rw-r--r-- | src/app/_componenets/SubscriberTable/SubscriberTable.tsx | 67 | ||||
| -rw-r--r-- | src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx | 35 |
2 files changed, 102 insertions, 0 deletions
diff --git a/src/app/_componenets/SubscriberTable/SubscriberTable.tsx b/src/app/_componenets/SubscriberTable/SubscriberTable.tsx new file mode 100644 index 0000000..a538bdd --- /dev/null +++ b/src/app/_componenets/SubscriberTable/SubscriberTable.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import Image from "next/image"; +import ChannelRow from "./SubscriberTableRow"; + +interface ChannelDataProp { + channel_name: string; + profile_pic: string; + subscribers: number; + sub_org: string; + video_count: number; + day_diff: number; +} + +interface SubscriberDataTableProp { + channel_data: ChannelDataProp[]; + timestamp: string; +} + +const DataTable = ({ channel_data, timestamp }: SubscriberDataTableProp) => { + 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 shadow-md 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" style={{ backgroundColor: '#2D4B71' }}> + <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"> + 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; +export type { SubscriberDataTableProp }; +export type { ChannelDataProp }; diff --git a/src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx b/src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx new file mode 100644 index 0000000..619a5b8 --- /dev/null +++ b/src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx @@ -0,0 +1,35 @@ +"use client" +import React from 'react'; +import Image from 'next/image'; +import { ChannelDataProp } from './SubscriberTable'; + +interface ChannelRowProps { + channel: ChannelDataProp; + index: number; +} + +const ChannelRow: React.FC<ChannelRowProps> = ({ channel, index }) => ( +<tr key={index} className="border-b hover:bg-gray-100 cursor-pointer"> + <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">{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 |