Feature - wms16 image upload component created

src/components/ImageUpload/Index.js

@@ -0,0 +1,95 @@
+import MDBox from 'components/MDBox';
+import UploadIcon from 'assets/images/UploadIcon';
+import MDTypography from 'components/MDTypography';
+import pxToRem from 'assets/theme-dark/functions/pxToRem';
+import Placeholder from 'assets/images/placeholder.png';
+import { Button } from '@mui/material';
+import Close from 'assets/images/Close';
+
+
+function ImageUpload () {
+  const PreviewImg = [1,2,3,4,5,6,7,8,9,10,11];
+  return(
+    <>
+      <MDBox 
+        sx={{ 
+          border: '1px solid #c4c4c4', 
+          borderRadius:pxToRem(8),
+          padding: pxToRem(16)
+        }}
+      >
+        <MDBox sx={{
+          border: '1px dashed #C4C4C4',
+          borderRadius: pxToRem(6),
+          cursor: 'pointer',
+          position: 'relative',
+          textAlign: 'center',
+          minHeight: pxToRem(200),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '16px'
+        }} 
+        >
+          <MDBox multiple component="input" name="file" type="file" 
+            sx={{ 
+              width:'100%', 
+              opacity: '0',
+              cursor: 'pointer', 
+              position: 'absolute', 
+              top:'0', 
+              left:'0', 
+              right:'0',
+              bottom: '0'
+            }}
+          />  
+          <MDBox component="span" >
+            <UploadIcon />
+            <MDTypography component="span" sx={{ color:'#000', letterSpacing:'0.01em', display: 'block' }} >
+                Upload Product images
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+        {/* -----------img-preview----------- */}
+        <MDBox sx={{ marginBottom:'-10px' }}>
+          {PreviewImg.map((item)=>{
+            return(
+              <MDBox key={item} component="span" 
+                sx={{ 
+                  width:'80px', 
+                  height:'63px', 
+                  marginRight: '16px', 
+                  display:'inline-block', 
+                  borderRadius:'4px', 
+                  position: 'relative' 
+                }}
+              >
+                <img src={Placeholder} alt='placeholder' width="100%"  />
+                <Button 
+                  sx={{ 
+                    backgroundColor: '#fff !important',
+                    boxShadow: '0px 1px 1px rgb(0 0 0 / 25%)',
+                    padding:'0',
+                    minWidth: '20px',
+                    minHeight: '20px',
+                    borderRadius: '100%',
+                    position: 'absolute',
+                    right: '4px',
+                    top: '4px',
+                    '&:hover' :{
+                      backgroundColor:'red !important'
+                    }
+                  }}
+                >
+                  <Close />
+                </Button>
+              </MDBox>
+            );
+          })} 
+        </MDBox>
+      </MDBox>
+    </>
+  );
+}
+
+export default ImageUpload;