82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
/*
|
|
* @Author : Eleanor Mao
|
|
* @Date : 2024-04-09 09:27:12
|
|
* @LastEditTime : 2024-04-09 09:27:12
|
|
*
|
|
*
|
|
*/
|
|
import React from "react";
|
|
import { Link, Outlet } from "react-router-dom";
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Box from '@mui/material/Box';
|
|
import Typography from '@mui/material/Typography';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import Paper from '@mui/material/Paper';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import AccountCircle from '@mui/icons-material/AccountCircle';
|
|
import { styled } from '@mui/material/styles';
|
|
import { RCIcon } from './RCIcon';
|
|
|
|
const Layout = styled(Box)(({ theme }) => (
|
|
{
|
|
flex: 'auto',
|
|
display: 'flex',
|
|
minHeight: 0,
|
|
height: '100vh',
|
|
flexDirection: 'column',
|
|
boxSizing: 'border-box',
|
|
background: theme.palette.background.default
|
|
}
|
|
));
|
|
|
|
|
|
const Content = styled(Box)(({ theme }) => ({
|
|
minHeight: 0,
|
|
flex: 'auto',
|
|
}));
|
|
export const Home = () => {
|
|
return (
|
|
<Layout>
|
|
<AppBar position="static" enableColorOnDark sx={{ bgcolor: '#3f51b5' }}>
|
|
<Toolbar>
|
|
<Typography
|
|
variant="h6"
|
|
noWrap
|
|
component={Link}
|
|
to="/"
|
|
style={{ cursor: 'point' }}
|
|
sx={{ flexGrow: 1, display: { xs: 'block' }, color: 'white', }}
|
|
>
|
|
<RCIcon style={{ marginRight: 4, verticalAlign: 'middle' }}/>
|
|
RingCentral AI Workflow Hub
|
|
</Typography>
|
|
<Box sx={{ display: { xs: 'block' }, color: 'white' }}>
|
|
<IconButton
|
|
size="large"
|
|
edge="end"
|
|
aria-label="account of current user"
|
|
aria-haspopup="true"
|
|
color="inherit"
|
|
>
|
|
<AccountCircle/>
|
|
</IconButton>
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Content sx={{ m: 4, }}>
|
|
<Paper elevation={0} sx={{ background: 'none' }}>
|
|
<Outlet/>
|
|
</Paper>
|
|
</Content>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
|
|
// style={{
|
|
// padding: 24,
|
|
// minHeight: `calc(100vh - 170px)`,
|
|
// background: theme.palette.background.paper,
|
|
// borderRadius: theme.shape.borderRadius,
|
|
// }}
|