feat HeaderComponent

TheoBrigitte · Jan 24, 2025 · 9d14042 · 9d14042
1 parent 4df82c2
commit 9d14042
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 40 deletions.
diff --git a/front/src/app/components/headerComponent/HeaderComponent.tsx b/front/src/app/components/headerComponent/HeaderComponent.tsx
@@ -0,0 +1,36 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTelegram } from "@fortawesome/free-brands-svg-icons";
+
+import Status from "../statusComponent/StatusComponent";
+
+import { StatusProps } from "../statusComponent/type";
+
+export default function HeaderComponent({
+  error,
+  data,
+  connectionRestored,
+  setConnectionRestored,
+  lastMessage,
+}: StatusProps) {
+  return (
+    <div className="HeaderComponent flex justify-evenly w-full">
+      <div className="flex flex-col justify-center">
+        <div>Receive notifications on Telegram</div>
+        <a className="flex text-blue-400 space-x-1" href="https://t.me/KimsufiNotifierBot">
+          <div>
+            <FontAwesomeIcon icon={faTelegram} />
+          </div>
+          <div>t.me/KimsufiNotifierBot</div>
+        </a>
+      </div>
+      <h1 className="text-center text-xl font-bold">OVH Eco server availability</h1>
+      <Status
+        error={error}
+        data={data}
+        connectionRestored={connectionRestored}
+        setConnectionRestored={setConnectionRestored}
+        lastMessage={lastMessage}
+      />
+    </div>
+  );
+}
diff --git a/front/src/app/components/statusComponent/StatusComponent.tsx b/front/src/app/components/statusComponent/StatusComponent.tsx
@@ -21,15 +21,10 @@ export default function Status({
 
   const loaderDisplay: ReactNode = <div>Loading ...</div>;
 
-  const restoredDisplay: ReactNode = (
-    <div className="text-green-700">Websocket connected</div>
-  );
+  const restoredDisplay: ReactNode = <div className="text-green-700">Websocket connected</div>;
 
   const lastMessageDisplay: ReactNode = (
-    <div>
-      Last update received at{" "}
-      {new Date(lastMessage).toTimeString().split(" ")[0]}
-    </div>
+    <div>Last update received at {new Date(lastMessage).toTimeString().split(" ")[0]}</div>
   );
 
   // Display error message
@@ -46,7 +41,7 @@ export default function Status({
   return (
     <div
       className={`
-        basis-1/4 flex flex-col justify-center font-mono
+        flex flex-col justify-center font-mono
         ${!statusDisplay ? "hidden" : ""}
         ${connectionRestored ? fadeOut : ""}
       `}

diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
@@ -2,12 +2,11 @@
 
 import { useState } from "react";
 import useWebSocket from "react-use-websocket";
+
 import ServersTable from "./components/server";
-import Status from "./components/statusComponent/StatusComponent";
-import { Server, ErrorNull } from "./components/types";
+import HeaderComponent from "./components/headerComponent/HeaderComponent";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTelegram } from "@fortawesome/free-brands-svg-icons";
+import { Server, ErrorNull } from "./components/types";
 
 export default function Home() {
   // Get the websocket URL from the environment variable
@@ -42,34 +41,15 @@ export default function Home() {
   });
 
   return (
-    <div className="flex flex-row justify-center">
-      <div className="pt-10 pb-20 px-10">
-        <div className="flex flex-row min-w-fit justify-center flex-nowrap text-nowrap">
-          <div className="basis-1/4 flex flex-col justify-center items-center">
-            <div>Receive notifications on Telegram</div>
-            <a
-              className="flex text-blue-400 space-x-1"
-              href="https://t.me/KimsufiNotifierBot"
-            >
-              <div>
-                <FontAwesomeIcon icon={faTelegram} />
-              </div>
-              <div>t.me/KimsufiNotifierBot</div>
-            </a>
-          </div>
-          <div className="basis-2/4 px-40 py-5 flex-none text-center text-xl font-bold">
-            OVH Eco server availability
-          </div>
-          <Status
-            error={error}
-            data={data}
-            connectionRestored={connectionRestored}
-            setConnectionRestored={setConnectionRestored}
-            lastMessage={lastMessage}
-          />
-        </div>
-        <ServersTable data={data} />
-      </div>
+    <div className="Home flex flex-col items-center pt-10 pb-20 px-10 max-w-7xl mx-auto">
+      <HeaderComponent
+        error={error}
+        data={data}
+        connectionRestored={connectionRestored}
+        setConnectionRestored={setConnectionRestored}
+        lastMessage={lastMessage}
+      />
+      <ServersTable data={data} />
     </div>
   );
 }