v3: re-write frontend using next js

1 files changed, 35 insertions, 0 deletions

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