2 files changed, 75 insertions, 39 deletions
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1723043..6d25642 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,50 +1,59 @@
 import SubscriberTable, {
-    type SubscriberDataTableProp,
+  type SubscriberDataTableProp,
 } from "../components/SubscriberTable/SubscriberTable";
 import TitleBar from "../components/TitleBar/TitleBar";
+import Announcement from "../components/Announcement";
 
 async function Home() {
-    const graphURL = process.env.NEXT_PUBLIC_GRAPH_URL;
-    const data: SubscriberDataTableProp = await getData();
-    return (
-        <>
-            <TitleBar title="PhaseTracker" backgroundColor="black" />
-            <div
-                className="sm:block hidden mt-4"
-                style={{
-                    overflow: "hidden",
-                    height: "105vh",
-                    position: "relative",
-                }}
-            >
-                <iframe
-                    title="Phase Connect Subscriber Count Graph"
-                    src={graphURL}
-                    style={{ position: "absolute", top: 0, left: 0 }}
-                    width="100%"
-                    height="100%"
-                />
-            </div>
-            <SubscriberTable {...data} />
-        </>
-    );
+  const graphURL = process.env.NEXT_PUBLIC_GRAPH_URL;
+  const announcementText = process.env.NEXT_PUBLIC_ANNOUNCEMENT;
+  const data: SubscriberDataTableProp = await getData();
+  return (
+    <>
+      <TitleBar title="PhaseTracker" backgroundColor="black" />
+        {announcementText && (
+          <Announcement
+            message={announcementText}
+            backgroundColor="#e0f7fa"
+            textColor="#006064"
+          />
+        )}
+      <div
+        className="sm:block hidden mt-4"
+        style={{
+          overflow: "hidden",
+          height: "105vh",
+          position: "relative",
+        }}
+      >
+        <iframe
+          title="Phase Connect Subscriber Count Graph"
+          src={graphURL}
+          style={{ position: "absolute", top: 0, left: 0 }}
+          width="100%"
+          height="100%"
+        />
+      </div>
+      <SubscriberTable {...data} />
+    </>
+  );
 }
 
 async function getData() {
-    const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
-    const endpoint = "/api/subscribers";
-    const headers = {
-        "Cache-Control": "no-cache",
-    };
-    const cacheOption = "no-cache";
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
+  const endpoint = "/api/subscribers";
+  const headers = {
+    "Cache-Control": "no-cache",
+  };
+  const cacheOption = "no-cache";
 
-    const response = await fetch(`${apiUrl}${endpoint}`, {
-        headers: headers,
-        cache: cacheOption,
-    });
-    if (!response.ok) {
-        console.log(response.statusText);
-    }
-    return response.json();
+  const response = await fetch(`${apiUrl}${endpoint}`, {
+    headers: headers,
+    cache: cacheOption,
+  });
+  if (!response.ok) {
+    console.log(response.statusText);
+  }
+  return response.json();
 }
 export default Home;
diff --git a/src/components/Announcement.tsx b/src/components/Announcement.tsx
new file mode 100644
index 0000000..ac7f805
--- /dev/null
+++ b/src/components/Announcement.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+interface AnnouncementProps {
+    message: string;
+    backgroundColor?: string;
+    textColor?: string;
+}
+
+const Announcement: React.FC<AnnouncementProps> = ({
+    message,
+    backgroundColor = "#f8d7da",
+    textColor = "#721c24",
+}) => {
+    return (
+        <div
+            className={`p-4 rounded-lg text-center font-bold`}
+            style={{
+                backgroundColor,
+                color: textColor,
+            }}
+        >
+            {message}
+        </div>
+    );
+};
+
+export default Announcement;