39 lines
1.4 KiB
JavaScript
39 lines
1.4 KiB
JavaScript
import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
|
|
import Check from '@mui/icons-material/Check';
|
|
import {CircularProgress} from "@mui/material"
|
|
const DownloadSection = ({ downloadStatus, onDownloadClick }) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
cursor: 'pointer',
|
|
width: '30',
|
|
height: '30',
|
|
backgroundColor: downloadStatus === 'completed' ? '#0070f3' : 'white',
|
|
border: `1px solid ${downloadStatus === 'completed' ? '#0070f3' : 'gray'}`,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
transition: 'background 0.2s, box-shadow 0.2s',
|
|
boxShadow: downloadStatus === 'completed' ? '0 0 5px rgba(0, 112, 243, 0.5)' : 'none',
|
|
padding:'5px'
|
|
}}
|
|
onClick={onDownloadClick}
|
|
>
|
|
{downloadStatus === 'completed' ? (
|
|
<>
|
|
<Check sx={{ color: 'white' }} fontSize="medium" />
|
|
</>
|
|
) : downloadStatus === 'downloading' ? (
|
|
<CircularProgress size={25} />
|
|
) : (
|
|
<>
|
|
<FileDownloadOutlinedIcon sx={{ color: '#0070f3' }} fontSize="medium" />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DownloadSection;
|