multiple Things Added

Add Product Main And Side Bar
html editor
add Image Component
main
Pedram Keshavarzi 3 years ago
parent 703de932c3
commit 31ceeaff95
  1. 301
      package-lock.json
  2. 2
      package.json
  3. 890
      src/view/addProduct/Main/editor.css
  4. 29
      src/view/addProduct/Main/index.js
  5. 12
      src/view/addProduct/Sidebar/index.js
  6. 47
      src/view/addProduct/components/addPic.js
  7. 12
      src/view/addProduct/index.js
  8. 9
      tailwind.config.js
  9. 129
      yarn.lock

301
package-lock.json generated

@ -12,6 +12,7 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"draft-js": "^0.11.7",
"jalaali-js": "^1.2.3",
"jalali-moment": "^3.3.10",
"lord-icon-element": "^3.3.3",
@ -19,6 +20,7 @@
"mapir-react-component": "^2.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-dropzone": "^11.4.2",
"react-icons": "^4.3.1",
"react-indiana-drag-scroll": "^2.1.0",
@ -5585,6 +5587,14 @@
"node": ">=10"
}
},
"node_modules/cross-fetch": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
"dependencies": {
"node-fetch": "2.6.7"
}
},
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -6410,6 +6420,37 @@
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
},
"node_modules/draft-js": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
"integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
"dependencies": {
"fbjs": "^2.0.0",
"immutable": "~3.7.4",
"object-assign": "^4.1.1"
},
"peerDependencies": {
"react": ">=0.14.0",
"react-dom": ">=0.14.0"
}
},
"node_modules/draft-js/node_modules/immutable": {
"version": "3.7.6",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
"integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=",
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/draftjs-utils": {
"version": "0.10.2",
"resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
"integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==",
"peerDependencies": {
"draft-js": "^0.11.x",
"immutable": "3.x.x || 4.x.x"
}
},
"node_modules/duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@ -7569,6 +7610,34 @@
"bser": "2.1.1"
}
},
"node_modules/fbjs": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
"integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
"dependencies": {
"core-js": "^3.6.4",
"cross-fetch": "^3.0.4",
"fbjs-css-vars": "^1.0.0",
"loose-envify": "^1.0.0",
"object-assign": "^4.1.0",
"promise": "^7.1.1",
"setimmediate": "^1.0.5",
"ua-parser-js": "^0.7.18"
}
},
"node_modules/fbjs-css-vars": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
"integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
},
"node_modules/fbjs/node_modules/promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dependencies": {
"asap": "~2.0.3"
}
},
"node_modules/figures": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@ -8458,6 +8527,15 @@
"node": ">=12"
}
},
"node_modules/html-to-draftjs": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz",
"integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==",
"peerDependencies": {
"draft-js": "^0.10.x || ^0.11.x",
"immutable": "3.x.x || 4.x.x"
}
},
"node_modules/html-webpack-plugin": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@ -11335,6 +11413,14 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"node_modules/linkify-it": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
"integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
"dependencies": {
"uc.micro": "^1.0.1"
}
},
"node_modules/loader-runner": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@ -11931,6 +12017,44 @@
"tslib": "^2.0.3"
}
},
"node_modules/node-fetch": {
"version": "2.6.7",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
"dependencies": {
"whatwg-url": "^5.0.0"
},
"engines": {
"node": "4.x || >=6.0.0"
},
"peerDependencies": {
"encoding": "^0.1.0"
},
"peerDependenciesMeta": {
"encoding": {
"optional": true
}
}
},
"node_modules/node-fetch/node_modules/tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
},
"node_modules/node-fetch/node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
},
"node_modules/node-fetch/node_modules/whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
"dependencies": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
}
},
"node_modules/node-forge": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@ -14152,6 +14276,24 @@
"react": "17.0.2"
}
},
"node_modules/react-draft-wysiwyg": {
"version": "1.14.7",
"resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz",
"integrity": "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg==",
"dependencies": {
"classnames": "^2.2.6",
"draftjs-utils": "^0.10.2",
"html-to-draftjs": "^1.5.0",
"linkify-it": "^2.2.0",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"draft-js": "^0.10.x || ^0.11.x",
"immutable": "3.x.x || 4.x.x",
"react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x",
"react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x"
}
},
"node_modules/react-dropzone": {
"version": "11.5.3",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.5.3.tgz",
@ -15117,6 +15259,11 @@
"node": ">= 0.8.0"
}
},
"node_modules/setimmediate": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
},
"node_modules/setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@ -16171,6 +16318,29 @@
"node": ">=4.2.0"
}
},
"node_modules/ua-parser-js": {
"version": "0.7.31",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/ua-parser-js"
},
{
"type": "paypal",
"url": "https://paypal.me/faisalman"
}
],
"engines": {
"node": "*"
}
},
"node_modules/uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
},
"node_modules/unbox-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@ -21334,6 +21504,14 @@
"yaml": "^1.10.0"
}
},
"cross-fetch": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
"requires": {
"node-fetch": "2.6.7"
}
},
"cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -21937,6 +22115,29 @@
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
},
"draft-js": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
"integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
"requires": {
"fbjs": "^2.0.0",
"immutable": "~3.7.4",
"object-assign": "^4.1.1"
},
"dependencies": {
"immutable": {
"version": "3.7.6",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
"integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks="
}
}
},
"draftjs-utils": {
"version": "0.10.2",
"resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
"integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==",
"requires": {}
},
"duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@ -22796,6 +22997,36 @@
"bser": "2.1.1"
}
},
"fbjs": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
"integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
"requires": {
"core-js": "^3.6.4",
"cross-fetch": "^3.0.4",
"fbjs-css-vars": "^1.0.0",
"loose-envify": "^1.0.0",
"object-assign": "^4.1.0",
"promise": "^7.1.1",
"setimmediate": "^1.0.5",
"ua-parser-js": "^0.7.18"
},
"dependencies": {
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"requires": {
"asap": "~2.0.3"
}
}
}
},
"fbjs-css-vars": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
"integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
},
"figures": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@ -23435,6 +23666,12 @@
"terser": "^5.10.0"
}
},
"html-to-draftjs": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz",
"integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==",
"requires": {}
},
"html-webpack-plugin": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@ -25493,6 +25730,14 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"linkify-it": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
"integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
"requires": {
"uc.micro": "^1.0.1"
}
},
"loader-runner": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@ -25951,6 +26196,35 @@
"tslib": "^2.0.3"
}
},
"node-fetch": {
"version": "2.6.7",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
"requires": {
"whatwg-url": "^5.0.0"
},
"dependencies": {
"tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
},
"webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
},
"whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
"requires": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
}
}
}
},
"node-forge": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@ -27401,6 +27675,18 @@
"scheduler": "^0.20.2"
}
},
"react-draft-wysiwyg": {
"version": "1.14.7",
"resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz",
"integrity": "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg==",
"requires": {
"classnames": "^2.2.6",
"draftjs-utils": "^0.10.2",
"html-to-draftjs": "^1.5.0",
"linkify-it": "^2.2.0",
"prop-types": "^15.7.2"
}
},
"react-dropzone": {
"version": "11.5.3",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.5.3.tgz",
@ -28112,6 +28398,11 @@
"send": "0.17.2"
}
},
"setimmediate": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
},
"setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@ -28902,6 +29193,16 @@
"integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
"peer": true
},
"ua-parser-js": {
"version": "0.7.31",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ=="
},
"uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
},
"unbox-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",

@ -7,6 +7,7 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"draft-js": "^0.11.7",
"jalaali-js": "^1.2.3",
"jalali-moment": "^3.3.10",
"lord-icon-element": "^3.3.3",
@ -14,6 +15,7 @@
"mapir-react-component": "^2.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-dropzone": "^11.4.2",
"react-icons": "^4.3.1",
"react-indiana-drag-scroll": "^2.1.0",

@ -0,0 +1,890 @@
.rdw-option-wrapper {
border: 1px solid #F1F1F1;
padding: 5px;
min-width: 25px;
height: 20px;
border-radius: 2px;
margin: 0 4px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background: white;
text-transform: capitalize;
}
.rdw-option-wrapper:hover {
box-shadow: 1px 1px 0px #BFBDBD;
}
.rdw-option-wrapper:active {
box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-option-active {
box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-option-disabled {
opacity: 0.3;
cursor: default;
}
.rdw-dropdown-wrapper {
height: 30px;
background: white;
cursor: pointer;
border: 1px solid #F1F1F1;
border-radius: 2px;
margin: 0 3px;
text-transform: capitalize;
background: white;
}
.rdw-dropdown-wrapper:focus {
outline: none;
}
.rdw-dropdown-wrapper:hover {
box-shadow: 1px 1px 0px #BFBDBD;
background-color: #FFFFFF;
}
.rdw-dropdown-wrapper:active {
box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-dropdown-carettoopen {
height: 0px;
width: 0px;
position: absolute;
top: 35%;
right: 10%;
border-top: 6px solid black;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.rdw-dropdown-carettoclose {
height: 0px;
width: 0px;
position: absolute;
top: 35%;
right: 10%;
border-bottom: 6px solid black;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.rdw-dropdown-selectedtext {
display: flex;
position: relative;
height: 100%;
align-items: center;
padding: 0 5px;
}
.rdw-dropdown-optionwrapper {
z-index: 100;
position: relative;
border: 1px solid #F1F1F1;
width: 98%;
background: white;
border-radius: 2px;
margin: 0;
padding: 0;
max-height: 250px;
overflow-y: scroll;
}
.rdw-dropdown-optionwrapper:hover {
box-shadow: 1px 1px 0px #BFBDBD;
background-color: #FFFFFF;
}
.rdw-dropdownoption-default {
min-height: 25px;
display: flex;
align-items: center;
padding: 0 5px;
}
.rdw-dropdownoption-highlighted {
background: #F1F1F1;
}
.rdw-dropdownoption-active {
background: #f5f5f5;
}
.rdw-dropdownoption-disabled {
opacity: 0.3;
cursor: default;
}
.rdw-inline-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap
}
.rdw-inline-dropdown {
width: 50px;
}
.rdw-inline-dropdownoption {
height: 40px;
display: flex;
justify-content: center;
}
.rdw-block-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap
}
.rdw-block-dropdown {
width: 110px;
}
.rdw-fontsize-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap
}
.rdw-fontsize-dropdown {
min-width: 40px;
}
.rdw-fontsize-option {
display: flex;
justify-content: center;
}
.rdw-fontfamily-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap
}
.rdw-fontfamily-dropdown {
width: 115px;
}
.rdw-fontfamily-placeholder {
white-space: nowrap;
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
.rdw-fontfamily-optionwrapper {
width: 140px;
}
.rdw-list-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap
}
.rdw-list-dropdown {
width: 50px;
z-index: 90;
}
.rdw-list-dropdownOption {
height: 40px;
display: flex;
justify-content: center;
}
.rdw-text-align-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap
}
.rdw-text-align-dropdown {
width: 50px;
z-index: 90;
}
.rdw-text-align-dropdownOption {
height: 40px;
display: flex;
justify-content: center;
}
.rdw-right-aligned-block {
text-align: right;
}
.rdw-left-aligned-block {
text-align: left !important;
}
.rdw-center-aligned-block {
text-align: center !important;
}
.rdw-justify-aligned-block {
text-align: justify !important;
}
.rdw-right-aligned-block > div {
display: inline-block;
}
.rdw-left-aligned-block > div {
display: inline-block;
}
.rdw-center-aligned-block > div {
display: inline-block;
}
.rdw-justify-aligned-block > div {
display: inline-block;
}
.rdw-colorpicker-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
position: relative;
flex-wrap: wrap
}
.rdw-colorpicker-modal {
position: absolute;
top: 35px;
left: 5px;
display: flex;
flex-direction: column;
width: 175px;
height: 175px;
border: 1px solid #F1F1F1;
padding: 15px;
border-radius: 2px;
z-index: 100;
background: white;
box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-colorpicker-modal-header {
display: flex;
padding-bottom: 5px;
}
.rdw-colorpicker-modal-style-label {
font-size: 15px;
width: 50%;
text-align: center;
cursor: pointer;
padding: 0 10px 5px;
}
.rdw-colorpicker-modal-style-label-active {
border-bottom: 2px solid #0a66b7;
}
.rdw-colorpicker-modal-options {
margin: 5px auto;
display: flex;
width: 100%;
height: 100%;
flex-wrap: wrap;
overflow: scroll;
}
.rdw-colorpicker-cube {
width: 22px;
height: 22px;
border: 1px solid #F1F1F1;
}
.rdw-colorpicker-option {
margin: 3px;
padding: 0;
min-height: 20px;
border: none;
width: 22px;
height: 22px;
min-width: 22px;
box-shadow: 1px 2px 1px #BFBDBD inset;
}
.rdw-colorpicker-option:hover {
box-shadow: 1px 2px 1px #BFBDBD;
}
.rdw-colorpicker-option:active {
box-shadow: -1px -2px 1px #BFBDBD;
}
.rdw-colorpicker-option-active {
box-shadow: 0px 0px 2px 2px #BFBDBD;
}
.rdw-link-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
position: relative;
flex-wrap: wrap
}
.rdw-link-dropdown {
width: 50px;
}
.rdw-link-dropdownOption {
height: 40px;
display: flex;
justify-content: center;
}
.rdw-link-dropdownPlaceholder {
margin-left: 8px;
}
.rdw-link-modal {
position: absolute;
top: 35px;
left: 5px;
display: flex;
flex-direction: column;
width: 235px;
height: 205px;
border: 1px solid #F1F1F1;
padding: 15px;
border-radius: 2px;
z-index: 100;
background: white;
box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-link-modal-label {
font-size: 15px;
}
.rdw-link-modal-input {
margin-top: 5px;
border-radius: 2px;
border: 1px solid #F1F1F1;
height: 25px;
margin-bottom: 15px;
padding: 0 5px;
}
.rdw-link-modal-input:focus {
outline: none;
}
.rdw-link-modal-buttonsection {
margin: 0 auto;
}
.rdw-link-modal-target-option {
margin-bottom: 20px;
}
.rdw-link-modal-target-option > span {
margin-left: 5px;
}
.rdw-link-modal-btn {
margin-left: 10px;
width: 75px;
height: 30px;
border: 1px solid #F1F1F1;
border-radius: 2px;
cursor: pointer;
background: white;
text-transform: capitalize;
}
.rdw-link-modal-btn:hover {
box-shadow: 1px 1px 0px #BFBDBD;
}
.rdw-link-modal-btn:active {
box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-link-modal-btn:focus {
outline: none !important;
}
.rdw-link-modal-btn:disabled {
background: #ece9e9;
}
.rdw-link-dropdownoption {
height: 40px;
display: flex;
justify-content: center;
}
.rdw-history-dropdown {
width: 50px;
}
.rdw-embedded-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
position: relative;
flex-wrap: wrap
}
.rdw-embedded-modal {
position: absolute;
top: 35px;
left: 5px;
display: flex;
flex-direction: column;
width: 235px;
height: 180px;
border: 1px solid #F1F1F1;
padding: 15px;
border-radius: 2px;
z-index: 100;
background: white;
justify-content: space-between;
box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-embedded-modal-header {
font-size: 15px;
display: flex;
}
.rdw-embedded-modal-header-option {
width: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.rdw-embedded-modal-header-label {
width: 95px;
border: 1px solid #f1f1f1;
margin-top: 5px;
background: #6EB8D4;
border-bottom: 2px solid #0a66b7;
}
.rdw-embedded-modal-link-section {
display: flex;
flex-direction: column;
}
.rdw-embedded-modal-link-input {
width: 88%;
height: 35px;
margin: 10px 0;
border: 1px solid #F1F1F1;
border-radius: 2px;
font-size: 15px;
padding: 0 5px;
}
.rdw-embedded-modal-link-input-wrapper {
display: flex;
align-items: center;
}
.rdw-embedded-modal-link-input:focus {
outline: none;
}
.rdw-embedded-modal-btn-section {
display: flex;
justify-content: center;
}
.rdw-embedded-modal-btn {
margin: 0 3px;
width: 75px;
height: 30px;
border: 1px solid #F1F1F1;
border-radius: 2px;
cursor: pointer;
background: white;
text-transform: capitalize;
}
.rdw-embedded-modal-btn:hover {
box-shadow: 1px 1px 0px #BFBDBD;
}
.rdw-embedded-modal-btn:active {
box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-embedded-modal-btn:focus {
outline: none !important;
}
.rdw-embedded-modal-btn:disabled {
background: #ece9e9;
}
.rdw-embedded-modal-size {
align-items: center;
display: flex;
margin: 8px 0;
justify-content: space-between;
}
.rdw-embedded-modal-size-input {
width: 80%;
height: 20px;
border: 1px solid #F1F1F1;
border-radius: 2px;
font-size: 12px;
}
.rdw-embedded-modal-size-input:focus {
outline: none;
}
.rdw-emoji-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
position: relative;
flex-wrap: wrap
}
.rdw-emoji-modal {
overflow: auto;
position: absolute;
top: 35px;
left: 5px;
display: flex;
flex-wrap: wrap;
width: 235px;
height: 180px;
border: 1px solid #F1F1F1;
padding: 15px;
border-radius: 2px;
z-index: 100;
background: white;
box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-emoji-icon {
margin: 2.5px;
height: 24px;
width: 24px;
cursor: pointer;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
}
.rdw-spinner {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.rdw-spinner > div {
width: 12px;
height: 12px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.rdw-spinner .rdw-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.rdw-spinner .rdw-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
.rdw-image-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
position: relative;
flex-wrap: wrap
}
.rdw-image-modal {
position: absolute;
top: 35px;
left: 5px;
display: flex;
flex-direction: column;
width: 235px;
border: 1px solid #F1F1F1;
padding: 15px;
border-radius: 2px;
z-index: 100;
background: white;
box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-image-modal-header {
font-size: 15px;
margin: 10px 0;
display: flex;
}
.rdw-image-modal-header-option {
width: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.rdw-image-modal-header-label {
width: 80px;
background: #f1f1f1;
border: 1px solid #f1f1f1;
margin-top: 5px;
}
.rdw-image-modal-header-label-highlighted {
background: #6EB8D4;
border-bottom: 2px solid #0a66b7;
}
.rdw-image-modal-upload-option {
width: 100%;
color: gray;
cursor: pointer;
display: flex;
border: none;
font-size: 15px;
align-items: center;
justify-content: center;
background-color: #f1f1f1;
outline: 2px dashed gray;
outline-offset: -10px;
margin: 10px 0;
padding: 9px 0;
}
.rdw-image-modal-upload-option-highlighted {
outline: 2px dashed #0a66b7;
}
.rdw-image-modal-upload-option-label {
cursor: pointer;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
}
.rdw-image-modal-upload-option-label span{
padding: 0 20px;
}
.rdw-image-modal-upload-option-image-preview {
max-width: 100%;
max-height: 200px;
}
.rdw-image-modal-upload-option-input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.rdw-image-modal-url-section {
display: flex;
align-items: center;
}
.rdw-image-modal-url-input {
width: 90%;
height: 35px;
margin: 15px 0 12px;
border: 1px solid #F1F1F1;
border-radius: 2px;
font-size: 15px;
padding: 0 5px;
}
.rdw-image-modal-btn-section {
margin: 10px auto 0;
}
.rdw-image-modal-url-input:focus {
outline: none;
}
.rdw-image-modal-btn {
margin: 0 5px;
width: 75px;
height: 30px;
border: 1px solid #F1F1F1;
border-radius: 2px;
cursor: pointer;
background: white;
text-transform: capitalize;
}
.rdw-image-modal-btn:hover {
box-shadow: 1px 1px 0px #BFBDBD;
}
.rdw-image-modal-btn:active {
box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-image-modal-btn:focus {
outline: none !important;
}
.rdw-image-modal-btn:disabled {
background: #ece9e9;
}
.rdw-image-modal-spinner {
position: absolute;
top: -3px;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
}
.rdw-image-modal-alt-input {
width: 70%;
height: 20px;
border: 1px solid #F1F1F1;
border-radius: 2px;
font-size: 12px;
margin-left: 5px;
}
.rdw-image-modal-alt-input:focus {
outline: none;
}
.rdw-image-modal-alt-lbl {
font-size: 12px;
}
.rdw-image-modal-size {
align-items: center;
display: flex;
margin: 8px 0;
justify-content: space-between;
}
.rdw-image-modal-size-input {
width: 40%;
height: 20px;
border: 1px solid #F1F1F1;
border-radius: 2px;
font-size: 12px;
}
.rdw-image-modal-size-input:focus {
outline: none;
}
.rdw-image-mandatory-sign {
color: red;
margin-left: 3px;
margin-right: 3px;
}
.rdw-remove-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
position: relative;
flex-wrap: wrap
}
.rdw-history-wrapper {
display: flex;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap
}
.rdw-history-dropdownoption {
height: 40px;
display: flex;
justify-content: center;
}
.rdw-history-dropdown {
width: 50px;
}
.rdw-link-decorator-wrapper {
position: relative;
}
.rdw-link-decorator-icon {
position: absolute;
left: 40%;
top: 0;
cursor: pointer;
background-color: white;
}
.rdw-mention-link {
text-decoration: none;
color: #1236ff;
background-color: #f0fbff;
padding: 1px 2px;
border-radius: 2px;
}
.rdw-suggestion-wrapper {
position: relative;
}
.rdw-suggestion-dropdown {
position: absolute;
display: flex;
flex-direction: column;
border: 1px solid #F1F1F1;
min-width: 100px;
max-height: 150px;
overflow: auto;
background: white;
z-index: 100;
}
.rdw-suggestion-option {
padding: 7px 5px;
border-bottom: 1px solid #f1f1f1;
}
.rdw-suggestion-option-active {
background-color: #F1F1F1;
}
.rdw-hashtag-link {
text-decoration: none;
color: #1236ff;
background-color: #f0fbff;
padding: 1px 2px;
border-radius: 2px;
}
.rdw-image-alignment-options-popup {
position: absolute;
background: white;
display: flex;
padding: 5px 2px;
border-radius: 2px;
border: 1px solid #F1F1F1;
width: 105px;
cursor: pointer;
z-index: 100;
}
.rdw-alignment-option-left {
justify-content: flex-start;
}
.rdw-image-alignment-option {
height: 15px;
width: 15px;
min-width: 15px;
}
.rdw-image-alignment {
position: relative;
}
.rdw-image-imagewrapper {
position: relative;
}
.rdw-image-center {
display: flex;
justify-content: center;
}
.rdw-image-left {
display: flex;
}
.rdw-image-right {
display: flex;
justify-content: flex-end;
}
.rdw-image-alignment-options-popup-right {
right: 0;
}
.rdw-editor-main {
height: 100%;
overflow: auto;
box-sizing: border-box;
}
.rdw-editor-toolbar {
padding: 6px 5px 0;
border-radius: 2px;
border: 1px solid #F1F1F1;
display: flex;
justify-content: flex-start;
background: white;
flex-wrap: wrap;
font-size: 15px;
margin-bottom: 5px;
user-select: none;
}
.public-DraftStyleDefault-block {
margin: 1em 0;
}
.rdw-editor-wrapper:focus {
outline: none;
}
.rdw-editor-wrapper {
box-sizing: content-box;
}
.rdw-editor-main blockquote {
border-left: 5px solid #f1f1f1;
padding-left: 5px;
background-color: red;
}
.rdw-editor-main pre {
background: red;
border-radius: 30px;
padding: 1px 10px;
}
/**
* Draft v0.9.1
*
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:300px;text-align:right;background-color: white ;padding: 0px 5px;}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:right}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:right}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin: 0px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}
/*# sourceMappingURL=react-draft-wysiwyg.css.map*/

@ -0,0 +1,29 @@
import React from "react";
import { Editor } from "react-draft-wysiwyg";
import AddPic from "../components/addPic";
import './editor.css';
const MainAP = () => {
return (
<div className="w-full flex flex-col py-4 px-10 items-center rtl">
<h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
اضافه کردن محصول جدید
</h1>
<input type='text' className="w-full h-14 rtl px-4 bg-white border border-blueCD text-blue3A rounded-lg outline-none focus:shadow-md font-bold" placeholder="نام محصول" />
<div className="w-full my-6 rtl text-right border border-grayE0 bg-white rounded-xl" >
<Editor
// editorState={editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
// onEditorStateChange={this.onEditorStateChange}
/>
</div>
<div className="flex justify-between w-full">
<AddPic />
</div>
</div>
)
}
export default MainAP;

@ -0,0 +1,12 @@
import React from "react";
const SideAP = () => {
return(
<div className=" w-full bg-green-200">
</div>
)
}
export default SideAP;

@ -0,0 +1,47 @@
import React, {useState, useEffect} from "react";
const AddPic = () => {
const [imageUrl, setImageUrl] = useState([]);
const [selectedImage, setSelectedImage] = useState(null);
useEffect(() => {
if (selectedImage) {
imageUrl.push(URL.createObjectURL(selectedImage));
console.log(imageUrl)
}
}, [selectedImage]);
return(
<div className="w-2/5 bg-white border rounded-lg border-grayE0 flex flex-col py-6">
<h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
تصویر شاخص / گالری
</h1>
<div className="w-full px-4 flex items-center">
<div>
{
imageUrl.length > 0 && <div className="w-32 h-32 rounded-xl flex flex-col items-center">
<img src={imageUrl[0]} className="h-full w-32 rounded-lg" />
{/* <p className="">تصویر شاخص</p> */}
</div>
}
</div>
<div className="flex flex-wrap items-center">
{
imageUrl.slice(1,imageUrl.length).map((item, index) => (
<img src={item} className="w-16 h-16 m-2 rounded-md"/>
))
}
<input type='file' className="hidden" id="productImageInput" onChange={e => {setSelectedImage(e.target.files[0]);}}/>
<label htmlFor="productImageInput"
className="bg-gray-200 w-16 h-16 flex items-center justify-center rounded-md m-2 text-3xl text-gray81 cursor-pointer hover:bg-gray-300">
+
</label>
</div>
</div>
</div>
)
}
export default AddPic;

@ -1,9 +1,17 @@
import React from "react";
import MainAP from "./Main";
import SideAP from "./Sidebar";
const AddProduct = () => {
return(
<div className="w-[96%] h-screen bg-gray-200 flex items-center justify-center">
skdjfksajflkjasdfasdf
<div className="w-[96%] h-screen overflow-x-hidden overflow-scroll bg-grayFD flex items-start mt-20 py-10 justify-center">
<div className="w-1/4">
<SideAP />
</div>
<div className="w-3/4">
<MainAP />
</div>
</div>
)
}

@ -29,6 +29,9 @@ module.exports = {
red5B : '#c82b5b',
red46OP: 'rgba(255, 246, 246, 0.8)',
grayEC: '#ececec',
grayFD : '#fdfdfd',
grayE0 : '#e0e0e0',
gray81 : '#818181',
red82OP: 'rgba(223, 20, 82, 0.08)',
pinkF5: '#fff1f5',
pinkD6 : '#ffd6d6',
@ -39,9 +42,13 @@ module.exports = {
blue5F : '#05335f',
blue7E : '#15517e',
blueFF : '#f2f9ff',
blue65 : '#65a9ff',
blueE3 : '#4c7fe3',
blueDF : '#14b5df',
blue52 : '#132c52'
blue52 : '#132c52',
blue3A : '#00253a',
blueCD : '#1064cd',
},
},
screens: {

@ -2475,7 +2475,7 @@
"define-properties" "^1.1.3"
"es-abstract" "^1.19.0"
"asap@~2.0.6":
"asap@~2.0.3", "asap@~2.0.6":
"integrity" "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
"resolved" "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz"
"version" "2.0.6"
@ -3222,7 +3222,7 @@
"resolved" "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.20.1.tgz"
"version" "3.20.1"
"core-js@^3.19.2":
"core-js@^3.19.2", "core-js@^3.6.4":
"integrity" "sha512-btdpStYFQScnNVQ5slVcr858KP0YWYjV16eGJQw8Gg7CWtu/2qNvIM3qVRIR3n1pK2R9NNOrTevbvAYxajwEjg=="
"resolved" "https://registry.npmjs.org/core-js/-/core-js-3.20.1.tgz"
"version" "3.20.1"
@ -3254,6 +3254,13 @@
"path-type" "^4.0.0"
"yaml" "^1.10.0"
"cross-fetch@^3.0.4":
"integrity" "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw=="
"resolved" "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz"
"version" "3.1.5"
dependencies:
"node-fetch" "2.6.7"
"cross-spawn@^7.0.2", "cross-spawn@^7.0.3":
"integrity" "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="
"resolved" "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@ -3821,6 +3828,20 @@
"resolved" "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz"
"version" "10.0.0"
"draft-js@^0.10.x || ^0.11.x", "draft-js@^0.11.7", "draft-js@^0.11.x":
"integrity" "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg=="
"resolved" "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz"
"version" "0.11.7"
dependencies:
"fbjs" "^2.0.0"
"immutable" "~3.7.4"
"object-assign" "^4.1.1"
"draftjs-utils@^0.10.2":
"integrity" "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg=="
"resolved" "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz"
"version" "0.10.2"
"duplexer@^0.1.2":
"integrity" "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
"resolved" "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
@ -4398,6 +4419,25 @@
dependencies:
"bser" "2.1.1"
"fbjs-css-vars@^1.0.0":
"integrity" "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
"resolved" "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz"
"version" "1.0.2"
"fbjs@^2.0.0":
"integrity" "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ=="
"resolved" "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz"
"version" "2.0.0"
dependencies:
"core-js" "^3.6.4"
"cross-fetch" "^3.0.4"
"fbjs-css-vars" "^1.0.0"
"loose-envify" "^1.0.0"
"object-assign" "^4.1.0"
"promise" "^7.1.1"
"setimmediate" "^1.0.5"
"ua-parser-js" "^0.7.18"
"figures@^3.0.0":
"integrity" "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg=="
"resolved" "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz"
@ -4896,6 +4936,11 @@
"relateurl" "^0.2.7"
"terser" "^5.10.0"
"html-to-draftjs@^1.5.0":
"integrity" "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ=="
"resolved" "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz"
"version" "1.5.0"
"html-webpack-plugin@^5.5.0":
"integrity" "sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw=="
"resolved" "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz"
@ -5053,11 +5098,16 @@
"resolved" "https://registry.npmjs.org/immer/-/immer-9.0.7.tgz"
"version" "9.0.7"
"immutable@^4.0.0":
"immutable@^4.0.0", "immutable@3.x.x || 4.x.x":
"integrity" "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
"resolved" "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz"
"version" "4.0.0"
"immutable@~3.7.4":
"integrity" "sha1-E7TTyxK++hVIKib+Gy665kAHHks="
"resolved" "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz"
"version" "3.7.6"
"import-cwd@^3.0.0":
"integrity" "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg=="
"resolved" "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz"
@ -6075,6 +6125,13 @@
"resolved" "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
"version" "1.2.4"
"linkify-it@^2.2.0":
"integrity" "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw=="
"resolved" "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz"
"version" "2.2.0"
dependencies:
"uc.micro" "^1.0.1"
"loader-runner@^4.2.0":
"integrity" "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw=="
"resolved" "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz"
@ -6176,7 +6233,7 @@
"chalk" "^4.1.0"
"is-unicode-supported" "^0.1.0"
"loose-envify@^1.1.0", "loose-envify@^1.4.0":
"loose-envify@^1.0.0", "loose-envify@^1.1.0", "loose-envify@^1.4.0":
"integrity" "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="
"resolved" "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
"version" "1.4.0"
@ -6451,6 +6508,13 @@
"lower-case" "^2.0.2"
"tslib" "^2.0.3"
"node-fetch@2.6.7":
"integrity" "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ=="
"resolved" "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz"
"version" "2.6.7"
dependencies:
"whatwg-url" "^5.0.0"
"node-forge@^0.10.0":
"integrity" "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
"resolved" "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz"
@ -6507,7 +6571,7 @@
"resolved" "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz"
"version" "2.2.0"
"object-assign@^4.1.1":
"object-assign@^4.1.0", "object-assign@^4.1.1":
"integrity" "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
"resolved" "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
"version" "4.1.1"
@ -7466,6 +7530,13 @@
"resolved" "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
"version" "2.0.3"
"promise@^7.1.1":
"integrity" "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg=="
"resolved" "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz"
"version" "7.3.1"
dependencies:
"asap" "~2.0.3"
"promise@^8.1.0":
"integrity" "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q=="
"resolved" "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz"
@ -7609,7 +7680,7 @@
"strip-ansi" "^6.0.1"
"text-table" "^0.2.0"
"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=16", "react-dom@>=16.8":
"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x":
"integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
"version" "17.0.2"
@ -7618,6 +7689,17 @@
"object-assign" "^4.1.1"
"scheduler" "^0.20.2"
"react-draft-wysiwyg@^1.14.7":
"integrity" "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg=="
"resolved" "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz"
"version" "1.14.7"
dependencies:
"classnames" "^2.2.6"
"draftjs-utils" "^0.10.2"
"html-to-draftjs" "^1.5.0"
"linkify-it" "^2.2.0"
"prop-types" "^15.7.2"
"react-dropzone@^11.4.2":
"integrity" "sha512-68+T6sWW5L89qJnn3SD1aRazhuRBhTT9JOI1W8vI5YWsfegM4C7tlGbPH1AgEbmZY5s8E8L0QhX0e3VdAa0KWA=="
"resolved" "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.5.3.tgz"
@ -7790,7 +7872,7 @@
dependencies:
"clsx" "^1.1.1"
"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=16", "react@>=16.8", "react@17.0.2":
"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2"
@ -8287,6 +8369,11 @@
"parseurl" "~1.3.3"
"send" "0.17.2"
"setimmediate@^1.0.5":
"integrity" "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
"resolved" "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz"
"version" "1.0.5"
"setprototypeof@1.1.0":
"integrity" "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
"resolved" "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz"
@ -8906,6 +8993,11 @@
dependencies:
"punycode" "^2.1.1"
"tr46@~0.0.3":
"integrity" "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
"resolved" "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
"version" "0.0.3"
"traverse@~0.6.6":
"integrity" "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
"resolved" "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz"
@ -8997,6 +9089,16 @@
"resolved" "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz"
"version" "4.5.4"
"ua-parser-js@^0.7.18":
"integrity" "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ=="
"resolved" "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz"
"version" "0.7.31"
"uc.micro@^1.0.1":
"integrity" "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
"resolved" "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz"
"version" "1.0.6"
"unbox-primitive@^1.0.1":
"integrity" "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw=="
"resolved" "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz"
@ -9175,6 +9277,11 @@
"resolved" "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.2.tgz"
"version" "2.1.2"
"webidl-conversions@^3.0.0":
"integrity" "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
"resolved" "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
"version" "3.0.1"
"webidl-conversions@^4.0.2":
"integrity" "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
"resolved" "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz"
@ -9331,6 +9438,14 @@
"resolved" "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz"
"version" "2.3.0"
"whatwg-url@^5.0.0":
"integrity" "sha1-lmRU6HZUYuN2RNNib2dCzotwll0="
"resolved" "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"
"version" "5.0.0"
dependencies:
"tr46" "~0.0.3"
"webidl-conversions" "^3.0.0"
"whatwg-url@^7.0.0":
"integrity" "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg=="
"resolved" "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz"

Loading…
Cancel
Save