Add Footer component

src/js/components/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { ErrorRenderer } from "~/components/ErrorRenderer";
 import { ResponseRenderer } from "~/components/ResponseRenderer";
+import { Loader } from "~/components/Loader";
 import { useWebService } from "~/hooks/useWebService";
 
 export function App() {
@@ -11,11 +12,6 @@ export function App() {
   } else if (error) {
     return <ErrorRenderer error={error} />;
   } else {
-    return (
+    return <Loader />;
-      <div className="w-full h-48" data-testid="loader">
-        <div className="flex flex-col h-5/6 justify-center w-3/4 m-auto"></div>
-        <footer className="flex items-center justify-center h-10">{t("loading")}</footer>
-      </div>
-    );
   }
 }

src/js/components/ErrorRenderer.tsx

@@ -1,13 +1,14 @@
 import React from "react";
+import { Footer } from "~/components/Footer";
 
 export function ErrorRenderer({ error }: { error: Error }) {
   const t = chrome.i18n.getMessage;
   return (
     <div data-testid="error" className="w-full h-48">
       <div className="flex flex-col h-5/6 justify-center w-3/4 m-auto"></div>
-      <footer className="flex items-center justify-center h-10">
+      <Footer>
         <span className="font-bold">{t("error")}</span>: {error.message}
-      </footer>
+      </Footer>
     </div>
   );
 }

src/js/components/Footer.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+
+export function Footer({ children }: { children: ReactNode }) {
+  return (
+    <footer className="flex h-10">
+      <div className="w-3/4 m-auto">{children}</div>
+    </footer>
+  );
+}

src/js/components/Loader.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import { Footer } from "~/components/Footer";
+
+export function Loader() {
+  const t = chrome.i18n.getMessage;
+  return (
+    <div className="w-full h-48" data-testid="loader">
+      <div className="flex flex-col h-5/6 justify-center w-3/4 m-auto"></div>
+      <Footer>{t("loading")}</Footer>
+    </div>
+  );
+}

src/js/components/ResponseRenderer.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, ReactNode } from "react";
 import { TResponse } from "~/lib/response";
+import { Footer } from "~/components/Footer";
 type TFunction = typeof chrome.i18n.getMessage;
 
 export function ResponseRenderer({ response }: { response: TResponse }) {
@@ -28,11 +29,11 @@ export function ResponseRenderer({ response }: { response: TResponse }) {
         <Row name={t("isp")} value={response.ISP} />
         <Row name={t("tor_exit_node")} value={<BooleanLabel on={response.isTorExitNode} t={t} />} />
       </div>
-      <footer className="flex items-center justify-center h-10">
+      <Footer>
         <a target="_blank" href="https://clean.myip.wtf">
           clean.myip.wtf
         </a>
-      </footer>
+      </Footer>
     </div>
   );
 }