From 6bd82ba66b79d4f6cb01a239a51316c0984a75c5 Mon Sep 17 00:00:00 2001 From: hiren1212 Date: Mon, 24 Jan 2022 22:55:41 +0530 Subject: [PATCH] Feature - wms16 image upload component created --- src/assets/images/Close.js | 9 +++ src/assets/images/UploadIcon.js | 7 ++ src/assets/images/placeholder.png | Bin 0 -> 9923 bytes src/components/ImageUpload/Index.js | 95 ++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+) create mode 100644 src/assets/images/Close.js create mode 100644 src/assets/images/UploadIcon.js create mode 100644 src/assets/images/placeholder.png create mode 100644 src/components/ImageUpload/Index.js diff --git a/src/assets/images/Close.js b/src/assets/images/Close.js new file mode 100644 index 0000000..a358a44 --- /dev/null +++ b/src/assets/images/Close.js @@ -0,0 +1,9 @@ +const Close = () => ( + + + + +); + +export default Close; + diff --git a/src/assets/images/UploadIcon.js b/src/assets/images/UploadIcon.js new file mode 100644 index 0000000..2d27998 --- /dev/null +++ b/src/assets/images/UploadIcon.js @@ -0,0 +1,7 @@ +const UploadIcon = () => ( + + + + +); +export default UploadIcon; diff --git a/src/assets/images/placeholder.png b/src/assets/images/placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..922a866d00ee26a1e6dea4db29c5fa4ce5782c43 GIT binary patch literal 9923 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 B8m9mN literal 0 HcmV?d00001 diff --git a/src/components/ImageUpload/Index.js b/src/components/ImageUpload/Index.js new file mode 100644 index 0000000..4c3148d --- /dev/null +++ b/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( + <> + + + + + + + Upload Product images + + + + {/* -----------img-preview----------- */} + + {PreviewImg.map((item)=>{ + return( + + placeholder + + + ); + })} + + + + ); +} + +export default ImageUpload;