diff options
Diffstat (limited to 'src/pages/Page.tsx')
-rw-r--r-- | src/pages/Page.tsx | 39 |
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> ); }; |