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

---
 src/components/Layout/Content.js | 110 ++++++++++++++++++++++++
 src/components/Layout/Layout.js  | 142 ++-----------------------------
 2 files changed, 119 insertions(+), 133 deletions(-)
 create mode 100644 src/components/Layout/Content.js

diff --git a/src/components/Layout/Content.js b/src/components/Layout/Content.js
new file mode 100644
index 0000000..3f24ca7
--- /dev/null
+++ b/src/components/Layout/Content.js
@@ -0,0 +1,110 @@
+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";
+import Typography from "../../pages/typography/Typography";
+import Notifications from "../../pages/notifications/Notifications";
+import Maps from "../../pages/maps/Maps";
+import Tables from "../../pages/tables/Tables";
+import Icons from "../../pages/icons/Icons";
+import Charts from "../../pages/charts/Charts";
+
+// context
+import { useLayoutState } from "../../context/LayoutContext";
+
+// styles
+import useStyles from "./styles";
+
+const Content = () => {
+  // global
+  var layoutState = useLayoutState();
+  var classes = useStyles();
+
+  return (
+    <div
+      className={classnames(classes.content, {
+        [classes.contentShift]: layoutState.isSidebarOpened
+      })}
+    >
+      <div className={classes.fakeToolbar} />
+      <Switch>
+        <Route path="/app/dashboard" component={Dashboard} />
+        <Route path="/app/typography" component={Typography} />
+        <Route path="/app/tables" component={Tables} />
+        <Route path="/app/notifications" component={Notifications} />
+        <Route
+          exact
+          path="/app/ui"
+          render={() => <Redirect to="/app/ui/icons" />}
+        />
+        <Route path="/app/ui/maps" component={Maps} />
+        <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>
+    </div>
+  );
+};
+
+export default Content;
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 8b09c84..882fb5d 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -1,148 +1,24 @@
 import React from "react";
-import {
-  Route,
-  Switch,
-  Redirect,
-  withRouter,
-} 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'
-
-// styles
-import useStyles from "./styles";
+import { withRouter } from "react-router-dom";
 
 // components
 import Header from "../Header";
 import Sidebar from "../Sidebar";
+import Content from "./Content";
 
-// pages
-import Dashboard from "../../pages/dashboard";
-import Typography from "../../pages/typography";
-import Notifications from "../../pages/notifications";
-import Maps from "../../pages/maps";
-import Tables from "../../pages/tables";
-import Icons from "../../pages/icons";
-import Charts from "../../pages/charts";
-
-// context
-import { useLayoutState } from "../../context/LayoutContext";
+// styles
+import useStyles from "./styles";
 
 function Layout(props) {
   var classes = useStyles();
 
-  // global
-  var layoutState = useLayoutState();
-
   return (
     <div className={classes.root}>
-        <>
-          <Header history={props.history} />
-          <Sidebar />
-          <div
-            className={classnames(classes.content, {
-              [classes.contentShift]: layoutState.isSidebarOpened,
-            })}
-          >
-            <div className={classes.fakeToolbar} />
-            <Switch>
-              <Route path="/app/dashboard" component={Dashboard} />
-              <Route path="/app/typography" component={Typography} />
-              <Route path="/app/tables" component={Tables} />
-              <Route path="/app/notifications" component={Notifications} />
-              <Route
-                exact
-                path="/app/ui"
-                render={() => <Redirect to="/app/ui/icons" />}
-              />
-              <Route path="/app/ui/maps" component={Maps} />
-              <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>
-          </div>
-        </>
+      <>
+        <Header history={props.history} />
+        <Sidebar />
+        <Content />
+      </>
     </div>
   );
 }