aboutsummaryrefslogtreecommitdiff
path: root/src/pages/Page.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/Page.tsx')
-rw-r--r--src/pages/Page.tsx39
1 files changed, 30 insertions, 9 deletions
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 6d4315e..56d7372 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -1,28 +1,49 @@
import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useMediaQuery } from '@material-ui/core';
+import { SnackbarProvider } from 'notistack';
+
import ProfilePage from './ProfilePage/ProfilePage';
import FeedPage from './FeedPage/FeedPage';
import AuthPage from './AuthPage/AuthPage';
+import HomePage from './HomePage/HomePage';
+import NotificationsPage from './NotificationsPage/NotificationsPage';
import { useNavigate } from '../hooks/useNavigate';
+
const useStyles = makeStyles(theme => ({
root: {
- width: theme.spacing(75),
- marginTop: theme.spacing(15),
- margin: '0 auto'
+ [theme.breakpoints.down('sm')]: {
+ margin: theme.spacing(2, 0, 12, 0)
+ },
+ [theme.breakpoints.up('md')]: {
+ margin: theme.spacing(15, 5, 8, 5)
+ }
}
}));
const Page: React.FC = () => {
const { page } = useNavigate();
const classes = useStyles();
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
return (
- <div className={classes.root}>
- { page.prefix === 'profile' && <ProfilePage />}
- { page.prefix === 'feed' && <FeedPage /> }
- { page.prefix === 'auth' && <AuthPage /> }
- </div>
+ <SnackbarProvider
+ maxSnack={3}
+ anchorOrigin={{
+ vertical: isMobile ? 'top' : 'bottom',
+ horizontal: 'right'
+ }}
+ >
+ <div className={classes.root}>
+ { page.prefix === 'home' && <HomePage />}
+ { page.prefix === 'profile' && <ProfilePage />}
+ { page.prefix === 'feed' && <FeedPage /> }
+ { page.prefix === 'auth' && <AuthPage /> }
+ { page.prefix === 'notifications' && <NotificationsPage /> }
+ </div>
+ </SnackbarProvider>
);
};