From adc88dbdf3274d4d0cf15b5f2cf7b0bbb939bfe0 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 18 Nov 2023 21:21:22 -0800
Subject: v3: re-write frontend using next js

---
 src/app/_componenets/Footer/Footer.tsx             | 27 +++++++++
 .../SubscriberTable/SubscriberTable.tsx            | 67 ++++++++++++++++++++++
 .../SubscriberTable/SubscriberTableRow.tsx         | 35 +++++++++++
 src/app/_componenets/TitleBar/TitleBar.tsx         | 18 ++++++
 4 files changed, 147 insertions(+)
 create mode 100644 src/app/_componenets/Footer/Footer.tsx
 create mode 100644 src/app/_componenets/SubscriberTable/SubscriberTable.tsx
 create mode 100644 src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx
 create mode 100644 src/app/_componenets/TitleBar/TitleBar.tsx

(limited to 'src/app/_componenets')

diff --git a/src/app/_componenets/Footer/Footer.tsx b/src/app/_componenets/Footer/Footer.tsx
new file mode 100644
index 0000000..f23c677
--- /dev/null
+++ b/src/app/_componenets/Footer/Footer.tsx
@@ -0,0 +1,27 @@
+
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="text-center">
+        <p className="text-bold">
+            Information
+        </p>
+        <p className="text-m">
+            Information is collected once per hour. Data collection will stop once a liver has graduated.
+            <br/>
+            This page is in now way affiliated with ANYCOLOR or with any of the channels listed here.
+            <br/>
+            Date Started: 2023-03-26
+        </p>
+        <p className="p-4">
+            <a className="hover:underline text-bold" href="https://github.com/pinapelz/Nijitrack">Source Code</a><br/>
+            We are currently under construction!
+        </p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
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
diff --git a/src/app/_componenets/TitleBar/TitleBar.tsx b/src/app/_componenets/TitleBar/TitleBar.tsx
new file mode 100644
index 0000000..27bebfc
--- /dev/null
+++ b/src/app/_componenets/TitleBar/TitleBar.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface TitleBarProps {
+    title: string;
+}
+
+const TitleBar: React.FC<TitleBarProps> = ({ title }) => {
+    return (
+        <div className="title-bar p-5 shadow-md" style={{ backgroundColor: '#2D4B71' }}>
+            <div style={{ width: 'fit-content', whiteSpace: 'nowrap', overflow: 'hidden' }}>
+                <span className="text-white text-4xl font-bold">{title}</span>
+            </div>
+        </div>
+    );
+};
+
+export default TitleBar;
\ No newline at end of file
-- 
cgit v1.2.3