55 lines
No EOL
1.6 KiB
TypeScript
55 lines
No EOL
1.6 KiB
TypeScript
import { useTheme } from '@/contexts/ThemeContext'
|
|
|
|
import { styled } from '@mui/material/styles'
|
|
|
|
|
|
import logoRed from '@/assets/logo/red.svg';
|
|
import logoWhite from '@/assets/logo/white.svg';
|
|
|
|
type LoadingPageProps = {
|
|
text: string;
|
|
value:number
|
|
};
|
|
|
|
const LoginIllustration = styled('img')(({ theme }) => ({
|
|
zIndex: 2,
|
|
blockSize: 'auto',
|
|
maxBlockSize: 680,
|
|
maxInlineSize: '100%',
|
|
margin: theme.spacing(12),
|
|
[theme.breakpoints.down(1536)]: {
|
|
maxBlockSize: 550
|
|
},
|
|
[theme.breakpoints.down('lg')]: {
|
|
maxBlockSize: 450
|
|
}
|
|
}))
|
|
|
|
const LoadingPage = ({ text, value }: LoadingPageProps) => {
|
|
|
|
const { isDark } = useTheme();
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-screen gap-2 absolute w-full z-50">
|
|
<img
|
|
src="https://www.sage.com/Areas/SageDotCom/img/sage-logo-green.svg"
|
|
alt="Sage Logo"
|
|
style={{ width: "500px", height: "auto" }}
|
|
/>
|
|
{/* {
|
|
isDark ? (
|
|
<LoginIllustration src={logoWhite} alt='character-illustration' />
|
|
):(
|
|
<LoginIllustration src={logoRed} alt='character-illustration' />
|
|
)
|
|
} */}
|
|
<div>
|
|
<div className="w-40 bg-[#941403] dark:bg-[#C94635] rounded-full h-1"><div className="h-1 rounded-full bg-[#c10302]" style={{width: `${value}%`}}></div></div>
|
|
{/* <progress className="progress progress-success w-56 bg-green-600" value="10" max="100"></progress> */}
|
|
</div>
|
|
<div><span className="text-[11px] font-semibold">{text} {value}%...</span></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LoadingPage; |