Merge pull request #56 from Souhaib-Benbouzid/master

add footer / fix overflow

Author: ZibanPirate

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

@@ -1,4 +1,105 @@
 import React from "react";
-import "./style";
+import "./style.scss";
 
-export const Footer = () => <div className="footer">Footer</div>;
+// 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",
+
+        text: "click me",
+      },
+      {
+        href: "http://www.google.com",
+        text: "click me",
+      },
+    ],
+  },
+];
+
+interface Props {}
+
+export const Footer: React.FC<Props> = ({}) => {
+  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>
+  );
+};

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

@@ -1,4 +1,26 @@
-.footer {
-  height: 400px;
-  background-color: darken($color: #fff, $amount: 30);
+.footer-grid {
+  width: 100%;
+  min-height: 400px;
+  display: grid;
+  gap: 15px;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  justify-content: center;
+  align-items: center;
+
+  background-color: #202325;
+
+  h2 {
+    color: #fff;
+  }
+  &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  &-link {
+    font-size: 1.1rem;
+    text-decoration: none;
+    padding: 15px;
+    color: #fff;
+  }
 }

frontend/src/common/style/_index.scss

@@ -3,4 +3,5 @@
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  overflow-x: hidden;
 }