content component

master
Tudor Stanciu 2021-07-04 02:34:53 +03:00
parent 9d1d27da0c
commit b075d31ee8
2 changed files with 119 additions and 133 deletions

View File

@ -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;

View File

@ -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>
);
}