Merge pull request #22 from j4ckofalltrades/update-footer

Use multiple column layout for Footer component
stream-pi · Jun 19, 2021 · 2671aca · 2671aca
2 parents 8eae266 + 26f1782
commit 2671aca
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 24 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,29 +1,33 @@
-// TODO: Make footer look nicer
-//* Core
-import { FC } from "react";
+import React from "react";
+import { Col, Container, Row } from "react-bootstrap";
 import LegalInfoModal from "@components/Modals/TermsOfUse";
 
-//* REDUX
-import { useAppSelector } from "@store/hooks";
-import { getCurrentYear } from "@store/selectors";
-
-const StreamPiFooter: FC = () => {
-  //* REDUX
-  const currentYear = useAppSelector(getCurrentYear);
+type Props = {
+  footerColumns: React.ReactElement;
+};
 
+const StreamPiFooter = ({ footerColumns }: Props): React.ReactElement => {
+  const currentYear = new Date().getFullYear();
   return (
     <>
-      <main className="flex-fill"></main>
-      <footer className="text-center footer p-3 mt-2">
-        <p className="mb-1">
-          &copy; 2019 - {currentYear}, Stream-Pi Group and its Affiliates
-        </p>
-        <p className="mb-1">
-          <LegalInfoModal />
-        </p>
-        <p className="mb-0">
-          Website Version <strong>{process.env.NEXT_PUBLIC_WEB_VERSION}</strong>
-        </p>
+      <footer className="card-footer pt-4 pb-4">
+        <Container>
+          <Row>
+            <Col className="ml-5" lg="6">
+              <p className="mb-1">
+                &copy; 2019 - {currentYear}, Stream-Pi Group and its Affiliates
+              </p>
+              <p className="mb-1">
+                <LegalInfoModal />
+              </p>
+              <p className="mb-0">
+                Website Version{" "}
+                <strong>{process.env.NEXT_PUBLIC_WEB_VERSION}</strong>
+              </p>
+            </Col>
+            {footerColumns}
+          </Row>
+        </Container>
       </footer>
     </>
   );

diff --git a/src/components/FooterColumn.tsx b/src/components/FooterColumn.tsx
@@ -0,0 +1,27 @@
+import { Col } from "react-bootstrap";
+import React from "react";
+
+type FooterLink = {
+  name: string;
+  href: string;
+};
+
+type Props = {
+  header: string;
+  links: FooterLink[];
+};
+
+const FooterColumn = ({ header, links }: Props): React.ReactElement => {
+  return (
+    <Col sm>
+      <h5>{header}</h5>
+      {links.map((l: FooterLink) => (
+        <li style={{ listStyleType: "none" }} key={l.name}>
+          <a href={l.href}>{l.name}</a>
+        </li>
+      ))}
+    </Col>
+  );
+};
+
+export default FooterColumn;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -24,11 +24,12 @@ import { useEffect } from "react";
 //* REDUX
 import { Provider } from "react-redux";
 import store from "@store";
+import FooterColumn from "@components/FooterColumn";
 
 //* MUST be called outside the main App
 initializeFontAwesome();
 
-function MyApp({ Component, pageProps }: AppProps) {
+const MyApp = ({ Component, pageProps }: AppProps) => {
   useEffect(() => {
     document.body.classList.add("body-transition");
   }, []);
@@ -41,6 +42,51 @@ function MyApp({ Component, pageProps }: AppProps) {
     keysToDelete: ["test-toast", "theme"],
   });
 
+  // TODO: Update links
+  const footerColumns = (
+    <>
+      <FooterColumn
+        header={"Links"}
+        links={[
+          {
+            name: "Documentation",
+            href: "",
+          },
+          {
+            name: "Download",
+            href: "",
+          },
+        ]}
+      />
+      <FooterColumn
+        header={"Social"}
+        links={[
+          {
+            name: "Twitter",
+            href: "",
+          },
+          {
+            name: "Reddit",
+            href: "",
+          },
+        ]}
+      />
+      <FooterColumn
+        header={"Community"}
+        links={[
+          {
+            name: "Discord",
+            href: "",
+          },
+          {
+            name: "Matrix",
+            href: "",
+          },
+        ]}
+      />
+    </>
+  );
+
   return (
     <Provider store={store}>
       <ToastContainer position="top-center" enableMultiContainer />
@@ -56,7 +102,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       <Container style={{ paddingTop: "4rem" }} fluid="md">
         <Component {...pageProps} />
       </Container>
-      <StreamPiFooter />
+      <StreamPiFooter footerColumns={footerColumns} />
       {/* For Site Updates */}
       <ToastContainer
         position="bottom-center"
@@ -70,6 +116,6 @@ function MyApp({ Component, pageProps }: AppProps) {
       <ScrollToTop />
     </Provider>
   );
-}
+};
 
 export default MyApp;