update,
This commit is contained in:
louiscklaw
70
tsc1877/task1/project/admin/src/layouts/UserLayout.js
Normal file
70
tsc1877/task1/project/admin/src/layouts/UserLayout.js
Normal file
@@ -0,0 +1,70 @@
|
||||
// ** MUI Imports
|
||||
import Box from '@mui/material/Box';
|
||||
import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
|
||||
// ** Layout Imports
|
||||
// !Do not remove this Layout import
|
||||
import VerticalLayout from 'src/@core/layouts/VerticalLayout';
|
||||
|
||||
// ** Navigation Imports
|
||||
import VerticalNavItems from 'src/navigation/vertical';
|
||||
|
||||
// ** Component Import
|
||||
import UpgradeToProButton from './components/UpgradeToProButton';
|
||||
import VerticalAppBarContent from './components/vertical/AppBarContent';
|
||||
|
||||
// ** Hook Import
|
||||
import { useSettings } from 'src/@core/hooks/useSettings';
|
||||
|
||||
const UserLayout = ({ children }) => {
|
||||
// ** Hooks
|
||||
const { settings, saveSettings } = useSettings();
|
||||
|
||||
/**
|
||||
* The below variable will hide the current layout menu at given screen size.
|
||||
* The menu will be accessible from the Hamburger icon only (Vertical Overlay Menu).
|
||||
* You can change the screen size from which you want to hide the current layout menu.
|
||||
* Please refer useMediaQuery() hook: https://mui.com/components/use-media-query/,
|
||||
* to know more about what values can be passed to this hook.
|
||||
* ! Do not change this value unless you know what you are doing. It can break the template.
|
||||
*/
|
||||
const hidden = useMediaQuery(theme => theme.breakpoints.down('lg'));
|
||||
|
||||
const UpgradeToProImg = () => {
|
||||
return (
|
||||
<Box sx={{ mx: 'auto' }}>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://themeselection.com/products/materio-mui-react-nextjs-admin-template/"
|
||||
>
|
||||
<img width={230} alt="upgrade to premium" src={`/images/misc/upgrade-banner-${settings.mode}.png`} />
|
||||
</a>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<VerticalLayout
|
||||
hidden={hidden}
|
||||
settings={settings}
|
||||
saveSettings={saveSettings}
|
||||
verticalNavItems={VerticalNavItems()} // Navigation Items
|
||||
verticalAppBarContent={(
|
||||
props, // AppBar Content
|
||||
) => (
|
||||
<VerticalAppBarContent
|
||||
hidden={hidden}
|
||||
settings={settings}
|
||||
saveSettings={saveSettings}
|
||||
toggleNavVisibility={props.toggleNavVisibility}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
{/* <UpgradeToProButton /> */}
|
||||
</VerticalLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserLayout;
|
||||
@@ -0,0 +1,111 @@
|
||||
// ** React Import
|
||||
import { useState } from 'react';
|
||||
|
||||
// ** MUI Imports
|
||||
import Box from '@mui/material/Box';
|
||||
import Fade from '@mui/material/Fade';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
|
||||
// ** Third Party Imports
|
||||
import { usePopper } from 'react-popper';
|
||||
|
||||
const BuyNowButton = () => {
|
||||
// ** States
|
||||
const [open, setOpen] = useState(false);
|
||||
const [popperElement, setPopperElement] = useState(null);
|
||||
const [referenceElement, setReferenceElement] = useState(null);
|
||||
|
||||
const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
|
||||
placement: 'top-end',
|
||||
});
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
update ? update() : null;
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
className="upgrade-to-pro-button mui-fixed"
|
||||
sx={{ right: theme => theme.spacing(20), bottom: theme => theme.spacing(10), zIndex: 11, position: 'fixed' }}
|
||||
>
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="contained"
|
||||
onMouseEnter={handleOpen}
|
||||
onMouseLeave={handleClose}
|
||||
ref={e => setReferenceElement(e)}
|
||||
href="https://themeselection.com/products/materio-mui-react-nextjs-admin-template/"
|
||||
sx={{
|
||||
backgroundColor: '#ff3e1d',
|
||||
boxShadow: '0 1px 20px 1px #ff3e1d',
|
||||
'&:hover': {
|
||||
boxShadow: 'none',
|
||||
backgroundColor: '#e6381a',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Upgrade To Pro
|
||||
</Button>
|
||||
<Fade in={open} timeout={700}>
|
||||
<Box
|
||||
style={styles.popper}
|
||||
ref={setPopperElement}
|
||||
{...attributes.popper}
|
||||
onMouseEnter={handleOpen}
|
||||
onMouseLeave={handleClose}
|
||||
sx={{ pb: 4, minWidth: theme => (theme.breakpoints.down('sm') ? 400 : 300) }}
|
||||
>
|
||||
<Paper elevation={9} sx={{ borderRadius: 1, overflow: 'hidden' }}>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://themeselection.com/products/materio-mui-react-nextjs-admin-template/"
|
||||
>
|
||||
<img width="100%" alt="materio-pro-banner" src="/images/misc/materio-pro-banner.png" />
|
||||
</a>
|
||||
<CardContent>
|
||||
<Typography sx={{ mb: 4 }} variant="h6">
|
||||
Materio - React Admin Template
|
||||
</Typography>
|
||||
<Typography sx={{ mb: 4 }} variant="body2">
|
||||
Materio Admin is the most developer friendly & highly customizable Admin Dashboard Template based on MUI
|
||||
and NextJS.
|
||||
</Typography>
|
||||
<Typography sx={{ mb: 4 }} variant="body2">
|
||||
Click on below buttons to explore PRO version.
|
||||
</Typography>
|
||||
<Button
|
||||
component="a"
|
||||
sx={{ mr: 4 }}
|
||||
target="_blank"
|
||||
variant="contained"
|
||||
href="https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/landing/"
|
||||
>
|
||||
Demo
|
||||
</Button>
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="outlined"
|
||||
href="https://themeselection.com/products/materio-mui-react-nextjs-admin-template/"
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Fade>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BuyNowButton;
|
||||
@@ -0,0 +1,15 @@
|
||||
const UserIcon = props => {
|
||||
// ** Props
|
||||
const { icon, iconProps } = props;
|
||||
const IconTag = icon;
|
||||
let styles;
|
||||
|
||||
/* styles = {
|
||||
color: 'red',
|
||||
fontSize: '2rem'
|
||||
} */
|
||||
// @ts-ignore
|
||||
return <IconTag {...iconProps} style={{ ...styles }} />;
|
||||
};
|
||||
|
||||
export default UserIcon;
|
||||
@@ -0,0 +1,44 @@
|
||||
// ** MUI Imports
|
||||
import Box from '@mui/material/Box';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
|
||||
// ** Icons Imports
|
||||
import Menu from 'mdi-material-ui/Menu';
|
||||
import Magnify from 'mdi-material-ui/Magnify';
|
||||
|
||||
// ** Components
|
||||
import ModeToggler from 'src/@core/layouts/components/shared-components/ModeToggler';
|
||||
import UserDropdown from 'src/@core/layouts/components/shared-components/UserDropdown';
|
||||
import NotificationDropdown from 'src/@core/layouts/components/shared-components/NotificationDropdown';
|
||||
|
||||
const AppBarContent = props => {
|
||||
// ** Props
|
||||
const { hidden, settings, saveSettings, toggleNavVisibility } = props;
|
||||
|
||||
// ** Hook
|
||||
const hiddenSm = useMediaQuery(theme => theme.breakpoints.down('sm'));
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Box className="actions-left" sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
|
||||
{hidden ? (
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={toggleNavVisibility}
|
||||
sx={{ ml: -2.75, ...(hiddenSm ? {} : { mr: 3.5 }) }}
|
||||
>
|
||||
<Menu />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</Box>
|
||||
<Box className="actions-right" sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<UserDropdown />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppBarContent;
|
||||
Reference in New Issue
Block a user