61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import {t} from '@/scripts/i18n';
|
|
import styled from '@emotion/styled';
|
|
import clsx from 'clsx';
|
|
import Skeleton from 'react-loading-skeleton';
|
|
import {Box, Icon, InfoTable} from './styles';
|
|
|
|
const ShrinkedSkeleton = styled(Skeleton)<{width?: string}>`
|
|
width: ${properties => properties.width};
|
|
`;
|
|
|
|
const isDarkMode = document.body.classList.contains('dark-mode');
|
|
|
|
export default function LoadingCard() {
|
|
return (
|
|
<Box className={clsx('info-box', {'bg-gray-dark': isDarkMode})}>
|
|
<Icon>
|
|
<Skeleton circle height={50} width={50}/>
|
|
</Icon>
|
|
<div className='info-box-content'>
|
|
<div className='row'>
|
|
<div className='col-10'>
|
|
<Skeleton width='140px'/>
|
|
</div>
|
|
<div className='col-2'/>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<Skeleton width='140px'/>
|
|
</div>
|
|
<div>
|
|
<Skeleton width='140px'/>
|
|
</div>
|
|
<InfoTable className='row m-2 border-top border-bottom'>
|
|
<div className='col-sm-4 py-1 text-center'>
|
|
<b className='d-block'>{t('general.user.score')}</b>
|
|
<span className='d-block py-1'>
|
|
<ShrinkedSkeleton width='30%'/>
|
|
</span>
|
|
</div>
|
|
<div className='col-sm-4 py-1 text-center'>
|
|
<b className='d-block'>{t('admin.permission')}</b>
|
|
<span className='d-block py-1'>
|
|
<ShrinkedSkeleton width='30%'/>
|
|
</span>
|
|
</div>
|
|
<div className='col-sm-4 py-1 text-center'>
|
|
<b className='d-block'>{t('admin.verification')}</b>
|
|
<span className='d-block py-1'>
|
|
<ShrinkedSkeleton width='30%'/>
|
|
</span>
|
|
</div>
|
|
</InfoTable>
|
|
<div>
|
|
<Skeleton width='180px'/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Box>
|
|
);
|
|
}
|