LFFE-21 transportation assistance

src/core/components/DownloadSection.jsx

@@ -0,0 +1,38 @@
+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;