add historical milestone table to channel pages

2 files changed, 39 insertions, 12 deletions

diff --git a/src/app/page.tsx b/src/app/page.tsx
index fb7f1a3..4749635 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,10 @@
-import SubscriberTable, {SubscriberDataTableProp} from '../components/SubscriberTable/SubscriberTable';
+import SubscriberTable, { SubscriberDataTableProp } from '../components/SubscriberTable/SubscriberTable';
 import TitleBar from '../components/TitleBar/TitleBar';
 
-async function Home(){
+async function Home() {
     const graphURL = process.env.NEXT_PUBLIC_GRAPH_URL
     const data: SubscriberDataTableProp = await getData();
-    return(
+    return (
         <>
             <TitleBar title="PhaseTracker" backgroundColor='black' />
             <div className="sm:block hidden mt-4" style={{ overflow: 'hidden', height: '105vh', position: 'relative' }}>
@@ -15,15 +15,15 @@ async function Home(){
     );
 }
 
-async function getData(){
+async function getData() {
     const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING
-    const response = await fetch(apiUrl+'/api/subscribers', {
+    const response = await fetch(apiUrl + '/api/subscribers', {
         headers: {
             'Cache-Control': 'no-cache'
         },
         cache: 'no-cache'
     });
-    if(!response.ok){
+    if (!response.ok) {
         console.log(response.statusText);
     }
     return response.json();
diff --git a/src/components/CompactTable/CompactTable.tsx b/src/components/CompactTable/CompactTable.tsx
index 153d5ea..64eb4f2 100644
--- a/src/components/CompactTable/CompactTable.tsx
+++ b/src/components/CompactTable/CompactTable.tsx
@@ -1,9 +1,36 @@
-interface CompactTableProps{
-    subs: number[];
-    milestone: string[];
-  }
+import React from 'react';
 
-const CompactTable = (props: CompactTableProps) => {
+interface CompactTableProps {
+  tableData: {
+    dates: string[];
+    milestones: string[];
+  }
 
 }
-export default CompactTable;
\ No newline at end of file
+
+const CompactTable: React.FC<CompactTableProps> = ({ tableData }) => {
+  return (
+    <div className="max-w-full mx-auto bg-gray-100 shadow-md rounded-lg overflow-hidden">
+      <div className="flex gap-x-4">
+        <div className="w-1/2 px-4 py-5">
+          <h2 className="text-lg font-semibold text-gray-900">Dates</h2>
+          <ul className="mt-3">
+            {tableData.dates.map((date, index) => (
+              <li key={index} className="text-gray-700 text-sm py-1 border-b border-gray-200">{date}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="w-1/2 px-4 py-5">
+          <h2 className="text-lg font-semibold text-gray-900">Milestones</h2>
+          <ul className="mt-3">
+            {tableData.milestones.map((milestone, index) => (
+              <li key={index} className="text-gray-700 text-sm py-1 border-b border-gray-200">{milestone.toLocaleString()}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CompactTable;