Merge pull request #58 from UCCNetsoc/colm/add_footer

Colm/add footer

.gitignore

@@ -4,6 +4,9 @@
 /node_modules
 /.pnp
 .pnp.js
+.cache
+dist
+package-lock.json
 yarn.lock
 
 # testing

src/App.tsx

@@ -1,12 +1,11 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+
 import About from './views/About/About';
 import Header from './components/Header';
 import Home from './views/Home/Home';
 import Gaming from './views/Gaming/Gaming';
 import Esports from './views/Esports/Esports';
 import Technology from './views/Technology/Technology';
-
-
 
 function App() {
   return (
@@ -21,6 +20,7 @@ function App() {
           <Route path="/esports" element={<Esports />} />  
         </Routes>
       </Router>
+      <Footer />
     </>
   );
 }

src/components/Footer.module.css

@@ -0,0 +1,35 @@
+footer {
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 2em;
+
+}
+
+.footer_links {
+    margin: 1em auto 0 auto;
+    max-width: 800px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.footer_links a {
+    margin: auto 2em;
+    padding: 1em;
+}
+
+.footer_links img {
+    width: 2em;
+    height: 2em;
+}
+
+iframe {
+    display: block;
+    margin: 2em auto;
+}
+
+.logo {
+    display: block;
+    margin: 0 auto;
+    max-width: 90%;
+}

src/components/Footer.tsx

@@ -0,0 +1,45 @@
+import styles from './Footer.module.css'
+
+const Footer = (): JSX.Element => {
+
+  const footer_links: { icon?: string, url: string, description: string }[] = [
+    {
+        icon: "/img/discord.svg",
+        url: "https://discord.netsoc.co",
+        description: "Join our Discord server"
+      }, 
+      {
+        icon: "/img/google_calendar.png",
+        url: "https://google.com",
+        description: "See what events we have coming up"
+      },
+      {
+        icon: "https://instagram.com/favicon.ico",
+        url: "https://instagram.com/uccnetsoc",
+        description: "Follow us on instagram to be updated with upcoming events"
+      },
+      {
+        icon: "/img/github.svg",
+        url: "https://github.com/uccnetsoc",
+        description: "Check out our Github"
+      },
+  ]
+
+  return (
+    <>
+      <footer>
+          <section className={styles.footer_links}>
+              {footer_links.map((link) => (
+                  <a href={link.url}><img src={link.icon} alt={link.description}/></a>
+              ))}
+          </section>
+          <iframe src="https://discord.com/widget?id=248421213628530688&theme=dark" width="350" height="250" allowTransparency={true} 
+              frameBorder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" title="Discord">
+          </iframe>
+          <img className={styles.logo} src="/img/logo-horizontal.svg" alt="Netsoc" />
+      </footer>
+    </>
+  )
+};
+
+export default Footer;