footer complete

Author: souhaib-benbouzid

frontend/src/apps/main/components/footer/index.tsx

@@ -1,105 +1,40 @@
 import React from "react";
 import "./style.scss";
 
-// Temp Data
-const Data = [
-  {
-    title: "Category",
-    links: [
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-    ],
-  },
-  {
-    title: "Category",
-
-    links: [
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-    ],
-  },
-  {
-    title: "Category",
-
-    links: [
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
-
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
+type link = {
+  href: string;
+  text: string;
+};
 
-        text: "click me",
-      },
-      {
-        href: "http://www.google.com",
-        text: "click me",
-      },
-    ],
-  },
-];
+type category = {
+  title: string;
+  links: link[];
+};
 
-interface Props {}
+interface Props {
+  data: category[];
+}
 
-export const Footer: React.FC<Props> = ({}) => {
+export const Footer: React.FC<Props> = ({ data }) => {
   return (
-    <footer className="footer-grid ">
-      {Data.map((gridElemnt, i) => {
-        return (
-          <div className="footer-grid-item" key={i}>
-            <h2>{gridElemnt.title}</h2>
-            {gridElemnt.links.map((link, i) => {
-              return (
-                <a className="footer-grid-link" href={link.href} key={i}>
-                  {link.text}
-                </a>
-              );
-            })}
-          </div>
-        );
-      })}
-    </footer>
+    <>
+      <footer className="footer-grid ">
+        {data.map((category, i) => {
+          return (
+            <div className="footer-grid-item" key={i}>
+              <h2>{category.title}</h2>
+              {category.links.map((link, i) => {
+                return (
+                  <a className="footer-grid-link" href={link.href} key={i}>
+                    {link.text}
+                  </a>
+                );
+              })}
+            </div>
+          );
+        })}
+      </footer>
+      <div className="copyright">Dzcode.io Algerian Open Source Community</div>
+    </>
   );
 };

frontend/src/apps/main/components/footer/style.scss

@@ -10,17 +10,29 @@
   background-color: #202325;
 
   h2 {
-    color: #fff;
+    color: rgba($color: #fff, $alpha: 0.9);
   }
   &-item {
     display: flex;
     flex-direction: column;
+    justify-content: flex-start;
     align-items: center;
+    height: 60%;
   }
   &-link {
-    font-size: 1.1rem;
+    font-size: 1.2rem;
     text-decoration: none;
     padding: 15px;
-    color: #fff;
+    color: rgba($color: #fff, $alpha: 0.8);
   }
 }
+.copyright {
+  background-color: #202325;
+  color: #fff;
+  font-size: 1.3rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 5rem;
+}

frontend/src/apps/main/entry/index.tsx

@@ -12,7 +12,9 @@ const Landing = lazy(() => import("t9/apps/main/scenes/landing"));
 const Articles = lazy(() => import("t9/apps/main/scenes/articles"));
 const Learn = lazy(() => import("t9/apps/main/scenes/learn"));
 
-// Temp data: Todo: replace with props from the store
+// Temp data:
+
+// TODO: replace with props from the store
 
 const navItems = [
   { id: 1, to: "/Learn/Getting_Started", name: "Learn" },
@@ -21,6 +23,54 @@ const navItems = [
   { id: 4, to: "/articles", name: "Articles" },
 ];
 
+// Temp Footer Data
+const data = [
+  {
+    title: "Recent Articles",
+    links: [
+      {
+        href: "https://staging.dzcode.io/Articles/Welcome_to_dzCode",
+        text: "Welcome To dzCode.io",
+      },
+      {
+        href: "https://staging.dzcode.io/Learn/Getting_Started",
+        text: "Getting Started dzCode.io",
+      },
+    ],
+  },
+  {
+    title: "Recent Projects",
+    links: [
+      {
+        href: "https://staging.dzcode.io/",
+        text: "Algerian Education Hierarchy",
+      },
+      {
+        href: "https://staging.dzcode.io/",
+        text: "Algerian Users",
+      },
+      {
+        href: "https://staging.dzcode.io/",
+        text: "Algerian Wilaya",
+      },
+    ],
+  },
+  {
+    title: "Social Media",
+    links: [
+      {
+        href: "www.facebook.com/dzcode.io",
+        text: "Facebook",
+      },
+      {
+        href:
+          "https://www.youtube.com/channel/UCqWze7IcHI-_2mvByYeGTJg?view_as=subscriber",
+        text: "Youtube",
+      },
+    ],
+  },
+];
+
 export const App: React.SFC<{}> = () => {
   return (
     <BrowserRouter>
@@ -33,7 +83,7 @@ export const App: React.SFC<{}> = () => {
           <Route render={() => <Redirect to="/" />} />
         </Switch>
       </Suspense>
-      <Footer />
+      <Footer data={data} />
     </BrowserRouter>
   );
 };