95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
Typography,
|
|
useMediaQuery
|
|
} from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles';
|
|
|
|
|
|
const NoTraining = () => {
|
|
const theme = useTheme();
|
|
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
|
|
|
return (
|
|
<>
|
|
{/* Header Section */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
|
|
mb: 3,
|
|
pl: 1,
|
|
pr: { xs: 1, sm: 3 },
|
|
flexDirection: { xs: 'column', sm: 'row', md: 'row' },
|
|
gap: { xs: 2, sm: 0 }
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
fontWeight: '500',
|
|
fontSize: { xs: '20px', sm: '22px', md: '24px' },
|
|
color: '#121212'
|
|
}}
|
|
>
|
|
Dashboard
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Empty State Content */}
|
|
<Card
|
|
sx={{
|
|
boxShadow: 'none',
|
|
p: 4,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
textAlign: 'center',
|
|
backgroundColor: 'transparent'
|
|
}}
|
|
>
|
|
<CardContent>
|
|
{/* Image Placeholder */}
|
|
<Box
|
|
component="img"
|
|
src="/images/compeoter.png"
|
|
alt="No products available"
|
|
sx={{
|
|
width: isSmallScreen ? 150 : 200,
|
|
height: 'auto',
|
|
mb: 1,
|
|
opacity: 0.8
|
|
}}
|
|
/>
|
|
|
|
{/* Title with colored "Sorry!" */}
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontWeight: 400,
|
|
fontSize: { xs: '14px', md: '18px' },
|
|
mb: 2,
|
|
color: '#5F6868',
|
|
whiteSpace: 'pre-line' // هذا يسمح بكسر السطر عند المسافات
|
|
}}
|
|
>
|
|
<Box component="span" sx={{ fontWeight: 600, fontSize: '18px' }}>Sorry!</Box>{' '}
|
|
There are no updates now..
|
|
{'\n'}check back later.
|
|
</Typography>
|
|
|
|
{/* Action Button */}
|
|
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NoTraining; |