Commit b4805169 authored by janithgamage1.ed's avatar janithgamage1.ed

fix: update

Desc : update project
parent 436196fe
......@@ -91,6 +91,7 @@ const application: NavItemType = {
title: <FormattedMessage id="learning-dashboard" />,
type: 'item',
url: '/learning-management/dashboard',
breadcrumbs: false
},
{
id: 'learning-curriculums',
......
// material-ui
import { Grid } from '@mui/material';
// third-party
// project import
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
import WelcomeBanner from 'sections/learning-management/WelcomeBanner';
// assets
......@@ -16,10 +16,11 @@ import ScrollX from 'components/ScrollX';
const Dashboard = () => {
return (
<MainCard content={false}>
<ScrollX>
</ScrollX>
</MainCard>
<Grid container rowSpacing={4.5} columnSpacing={3}>
<Grid item xs={12}>
<WelcomeBanner />
</Grid>
</Grid>
)
}
......
......@@ -19,8 +19,6 @@ const List = () => {
return (
<MainCard content={false}>
<ScrollX>
{/* content here */}
<h1>Sample Page 2</h1>
</ScrollX>
</MainCard>
)
......
......@@ -18,8 +18,6 @@ const List = () => {
return (
<MainCard content={false}>
<ScrollX>
{/* content here */}
<h1>Sample Page</h1>
</ScrollX>
</MainCard>
)
......
import { useState } from 'react';
// material-ui
import { AvatarGroup, Box, Button, Divider, Grid, LinearProgress, Stack, Tooltip, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
// project import
import Avatar from 'components/@extended/Avatar';
import MainCard from 'components/MainCard';
// assets
import { PlusOutlined } from '@ant-design/icons';
import Reader from 'assets/images/analytics/reader.svg';
// types
import { ThemeDirection } from 'types/config';
const avatarImage = require.context('assets/images/users', true);
// ==============================|| READER CARD ||============================== //
function ReaderCard() {
const theme = useTheme();
const [show, setShow] = useState<boolean>(false);
return (
<Grid item xs={12}>
<Grid container>
<Grid
item
xs={12}
sm={7}
sx={{
bgcolor: `${theme.palette.primary.main}`,
position: 'relative',
p: 2.75,
borderRadius: { xs: 2, sm: '8px 0px 0px 8px' },
overflow: 'hidden'
}}
>
<Stack>
<Typography variant="h5" color="white">
What would you want to learn today
</Typography>
<Typography color={theme.palette.grey[0]} variant="caption" sx={{ maxWidth: '55%', pt: 1 }}>
Your learning capacity is 80% as daily analytics
</Typography>
<Typography variant="h4" color="white" sx={{ pt: 8, pb: 1, zIndex: 1 }}>
35% Completed
</Typography>
<Box sx={{ maxWidth: '60%' }}>
<LinearProgress variant="determinate" color="success" value={35} />
</Box>
<Box
sx={{
position: 'absolute',
bottom: -7,
right: 0,
...(theme.direction === ThemeDirection.RTL && { transform: { xs: 'rotateY(180deg)', sm: 'inherit' } })
}}
>
<img alt="reder" src={Reader} />
</Box>
</Stack>
</Grid>
<Grid item xs={12} sm={5}>
<MainCard sx={{ borderRadius: { xs: 2, sm: '0px 8px 8px 0px' }, height: '100%', mt: { xs: 2.5, sm: 0 } }}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Stack>
<Typography>Get started with new basic skills</Typography>
<Typography color="textSecondary" sx={{ pt: 1 }}>
Last Date 5th Nov 2020
</Typography>
<Divider sx={{ pt: 3, width: '100%' }} />
</Stack>
</Grid>
<Grid item xs={12}>
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={3}>
<Box sx={{ width: 186 }}>
<Tooltip
open={show}
placement="top-end"
title={
<AvatarGroup max={10}>
<Avatar alt="Agnes Walker" src={avatarImage(`./avatar-4.png`)} />
<Avatar alt="Trevor Henderson" src={avatarImage(`./avatar-5.png`)} />
<Avatar alt="Jone Doe" src={avatarImage(`./avatar-6.png`)} />
</AvatarGroup>
}
>
<AvatarGroup
sx={{
'& .MuiAvatarGroup-avatar': { bgcolor: theme.palette.primary.main, cursor: 'pointer' },
justifyContent: 'start',
'& .MuiAvatar-root': { width: 32, height: 32, fontSize: '0.875rem', bgcolor: 'secondary.400' }
}}
max={4}
componentsProps={{
additionalAvatar: {
onMouseEnter: () => {
setShow(true);
},
onMouseLeave: () => {
setShow(false);
}
}
}}
>
<Avatar alt="Remy Sharp" src={avatarImage(`./avatar-1.png`)} />
<Avatar alt="Travis Howard" src={avatarImage(`./avatar-2.png`)} />
<Avatar alt="Cindy Baker" src={avatarImage(`./avatar-3.png`)} />
<Avatar alt="Agnes Walker" src={avatarImage(`./avatar-4.png`)} />
<Avatar alt="Trevor Henderson" src={avatarImage(`./avatar-5.png`)} />
</AvatarGroup>
</Tooltip>
</Box>
<Button size="small" variant="contained" sx={{ minWidth: 'max-content', p: 1.5 }}>
<PlusOutlined />
</Button>
</Stack>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" color="secondary">
Chrome fixed the bug several versions ago, thus rendering this...
</Typography>
</Grid>
</Grid>
</MainCard>
</Grid>
</Grid>
</Grid>
);
}
export default ReaderCard;
// material-ui
import { Box, Button, Grid, Stack, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
// project import
import MainCard from 'components/MainCard';
//asset
import WelcomeImageArrow from 'assets/images/analytics/welcome-arrow.png';
import WelcomeImage from 'assets/images/analytics/welcome-banner.png';
// types
import { ThemeDirection } from 'types/config';
import { useNavigate } from 'react-router';
// ==============================|| ANALYTICS - WELCOME ||============================== //
const WelcomeBanner = () => {
const theme = useTheme();
const navigate = useNavigate()
return (
<MainCard
border={false}
sx={{
background:
theme.direction === ThemeDirection.RTL
? `linear-gradient(60.38deg, ${theme.palette.primary.lighter} 114%, ${theme.palette.primary.light} 34.42%, ${theme.palette.primary.main} 60.95%, ${theme.palette.primary.dark} 84.83%, ${theme.palette.primary.darker} 104.37%)`
: `linear-gradient(250.38deg, ${theme.palette.primary.lighter} 2.39%, ${theme.palette.primary.light} 34.42%, ${theme.palette.primary.main} 60.95%, ${theme.palette.primary.dark} 84.83%, ${theme.palette.primary.darker} 104.37%)`
}}
>
<Grid container>
<Grid item md={6} sm={6} xs={12}>
<Stack spacing={2} sx={{ padding: 3.4 }}>
<Typography variant="h2" color={theme.palette.background.paper}>
Welcome to SSL Sign Language Learning Platform
</Typography>
<Typography variant="h6" color={theme.palette.background.paper}>
Welcome to the SSL Sign Language Learning Platform. Your path to mastering sign language starts here. Whether you're a beginner or refining skills, our platform offers diverse courses with step-by-step tutorials. Begin your journey to fluent communication in SSL Sign Language today.
</Typography>
<Box>
<Button
variant="outlined"
color="secondary"
sx={{ color: theme.palette.background.paper, borderColor: theme.palette.background.paper }}
onClick={() => {navigate('/learning-management/curriculums')}}
>
View full Courses
</Button>
</Box>
</Stack>
</Grid>
<Grid item sm={6} xs={12} sx={{ display: { xs: 'none', sm: 'initial' } }}>
<Stack sx={{ position: 'relative', pr: { sm: 3, md: 8 } }} justifyContent="center" alignItems="flex-end">
<img src={WelcomeImage} alt="Welcome" />
<Box sx={{ position: 'absolute', bottom: 0, right: '10%' }}>
<img src={WelcomeImageArrow} alt="Welcome Arrow" />
</Box>
</Stack>
</Grid>
</Grid>
</MainCard>
);
};
export default WelcomeBanner;
......@@ -157,7 +157,7 @@
"curriculum-management": "Curriculum Management",
"learning-management": "Learning Management",
"learning-list": "Learning List",
"learning-curriculums": "Course",
"learning-curriculums": "Courses",
"learning-curriculums-subscribed": "My Courses",
"learning-lead-board": "Lead Board",
"learning-feedback": "Feedback",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment