From 678fc6a4e4f9f82ce93c0bc87dbcea9447940592 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sun, 4 Jul 2021 02:38:29 +0300
Subject: [PATCH] content footer component

---
 src/components/Layout/Content.js       | 62 +---------------------
 src/components/Layout/ContentFooter.js | 73 ++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 60 deletions(-)
 create mode 100644 src/components/Layout/ContentFooter.js

diff --git a/src/components/Layout/Content.js b/src/components/Layout/Content.js
index 3f24ca7..6b3dc42 100644
--- a/src/components/Layout/Content.js
+++ b/src/components/Layout/Content.js
@@ -1,15 +1,6 @@
 import React from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import classnames from "classnames";
-import { Box, IconButton, Link } from "@material-ui/core";
-import Icon from "@mdi/react";
-
-//icons
-import {
-  mdiFacebook as FacebookIcon,
-  mdiTwitter as TwitterIcon,
-  mdiGithub as GithubIcon
-} from "@mdi/js";
 
 // pages
 import Dashboard from "../../pages/dashboard/Dashboard";
@@ -19,6 +10,7 @@ import Maps from "../../pages/maps/Maps";
 import Tables from "../../pages/tables/Tables";
 import Icons from "../../pages/icons/Icons";
 import Charts from "../../pages/charts/Charts";
+import ContentFooter from "./ContentFooter";
 
 // context
 import { useLayoutState } from "../../context/LayoutContext";
@@ -52,57 +44,7 @@ const Content = () => {
         <Route path="/app/ui/icons" component={Icons} />
         <Route path="/app/ui/charts" component={Charts} />
       </Switch>
-      <Box
-        mt={5}
-        width={"100%"}
-        display={"flex"}
-        alignItems={"center"}
-        justifyContent="space-between"
-      >
-        <div>
-          <Link
-            color={"primary"}
-            href={"https://flatlogic.com/"}
-            target={"_blank"}
-            className={classes.link}
-          >
-            Flatlogic
-          </Link>
-          <Link
-            color={"primary"}
-            href={"https://flatlogic.com/about"}
-            target={"_blank"}
-            className={classes.link}
-          >
-            About Us
-          </Link>
-          <Link
-            color={"primary"}
-            href={"https://flatlogic.com/blog"}
-            target={"_blank"}
-            className={classes.link}
-          >
-            Blog
-          </Link>
-        </div>
-        <div>
-          <Link href={"https://www.facebook.com/flatlogic"} target={"_blank"}>
-            <IconButton aria-label="facebook">
-              <Icon path={FacebookIcon} size={1} color="#6E6E6E99" />
-            </IconButton>
-          </Link>
-          <Link href={"https://twitter.com/flatlogic"} target={"_blank"}>
-            <IconButton aria-label="twitter">
-              <Icon path={TwitterIcon} size={1} color="#6E6E6E99" />
-            </IconButton>
-          </Link>
-          <Link href={"https://github.com/flatlogic"} target={"_blank"}>
-            <IconButton aria-label="github" style={{ marginRight: -12 }}>
-              <Icon path={GithubIcon} size={1} color="#6E6E6E99" />
-            </IconButton>
-          </Link>
-        </div>
-      </Box>
+      <ContentFooter />
     </div>
   );
 };
diff --git a/src/components/Layout/ContentFooter.js b/src/components/Layout/ContentFooter.js
new file mode 100644
index 0000000..b3424aa
--- /dev/null
+++ b/src/components/Layout/ContentFooter.js
@@ -0,0 +1,73 @@
+import React from "react";
+import { Box, IconButton, Link } from "@material-ui/core";
+import Icon from "@mdi/react";
+
+//icons
+import {
+  mdiFacebook as FacebookIcon,
+  mdiTwitter as TwitterIcon,
+  mdiGithub as GithubIcon
+} from "@mdi/js";
+
+// styles
+import useStyles from "./styles";
+
+const ContentFooter = () => {
+  var classes = useStyles();
+
+  return (
+    <Box
+      mt={5}
+      width={"100%"}
+      display={"flex"}
+      alignItems={"center"}
+      justifyContent="space-between"
+    >
+      <div>
+        <Link
+          color={"primary"}
+          href={"https://flatlogic.com/"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          Flatlogic
+        </Link>
+        <Link
+          color={"primary"}
+          href={"https://flatlogic.com/about"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          About Us
+        </Link>
+        <Link
+          color={"primary"}
+          href={"https://flatlogic.com/blog"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          Blog
+        </Link>
+      </div>
+      <div>
+        <Link href={"https://www.facebook.com/flatlogic"} target={"_blank"}>
+          <IconButton aria-label="facebook">
+            <Icon path={FacebookIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+        <Link href={"https://twitter.com/flatlogic"} target={"_blank"}>
+          <IconButton aria-label="twitter">
+            <Icon path={TwitterIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+        <Link href={"https://github.com/flatlogic"} target={"_blank"}>
+          <IconButton aria-label="github" style={{ marginRight: -12 }}>
+            <Icon path={GithubIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+      </div>
+    </Box>
+  );
+};
+
+export default ContentFooter;