mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

semi donut chart added

Browse Source
master
mahdi andalib 3 years ago
parent cc703354f5
commit c0b5fd94f4
7 changed files with 8373 additions and 7661 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 287
      package-lock.json
  2. 2
      package.json
  3. 6
      src/App.js
  4. 76
      src/components/BarChartApex/index.js
  5. 58
      src/components/SemiDonut/index.js
  6. 10
      src/components/UploadFile/index.js
  7. 15595
      yarn.lock

287
package-lock.json generated
Unescape View File

@ -17,10 +17,13 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@themesberg/flowbite": "^1.3.0",
"apexcharts": "^3.33.1",
"date-fns": "^2.28.0",
"react": "^17.0.2",
"react-apexcharts": "^1.3.9",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-input-range": "^1.3.0",
"react-redux": "^7.2.6",
"react-scripts": "5.0.0",
"react-table": "^7.7.0",
@ -29,6 +32,7 @@
"redux": "^4.1.2",
"sass": "^1.45.0",
"sweetalert2": "^11.3.4",
"swiper": "^8.0.6",
"tw-elements": "^1.0.0-alpha8",
"use-draggable-scroll": "^0.1.0",
"web-vitals": "^2.1.2"
@ -4437,6 +4441,19 @@
"node": ">= 8"
}
},
"node_modules/apexcharts": {
"version": "3.33.1",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.33.1.tgz",
"integrity": "sha512-5aVzrgJefd8EH4w7oRmuOhA3+cxJxQg27cYg3ANVGvPCOB4AY3mVVNtFHRFaIq7bv8ws4GRaA9MWfzoWQw3MPQ==",
"dependencies": {
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
"svg.filter.js": "^2.0.2",
"svg.pathmorphing.js": "^0.1.3",
"svg.resize.js": "^1.4.3",
"svg.select.js": "^3.0.1"
}
},
"node_modules/arg": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@ -4567,6 +4584,11 @@
"node": ">= 4.5.0"
}
},
"node_modules/autobind-decorator": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz",
"integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E="
},
"node_modules/autoprefixer": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
@ -6462,6 +6484,14 @@
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/dom7": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
"dependencies": {
"ssr-window": "^4.0.0"
}
},
"node_modules/domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
@ -13614,6 +13644,18 @@
"node": ">=0.10.0"
}
},
"node_modules/react-apexcharts": {
"version": "1.3.9",
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.3.9.tgz",
"integrity": "sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==",
"dependencies": {
"prop-types": "^15.5.7"
},
"peerDependencies": {
"apexcharts": "^3.18.0",
"react": ">=0.13"
}
},
"node_modules/react-app-polyfill": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@ -13773,6 +13815,19 @@
"react": "*"
}
},
"node_modules/react-input-range": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz",
"integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=",
"dependencies": {
"autobind-decorator": "^1.3.4",
"prop-types": "^15.5.8"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -14890,6 +14945,11 @@
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
},
"node_modules/ssr-window": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
},
"node_modules/stable": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@ -15178,6 +15238,89 @@
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
},
"node_modules/svg.draggable.js": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
"dependencies": {
"svg.js": "^2.0.1"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.easing.js": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
"integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
"dependencies": {
"svg.js": ">=2.3.x"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.filter.js": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
"integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
"dependencies": {
"svg.js": "^2.2.5"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.js": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
},
"node_modules/svg.pathmorphing.js": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
"dependencies": {
"svg.js": "^2.4.0"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.resize.js": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
"dependencies": {
"svg.js": "^2.6.5",
"svg.select.js": "^2.1.2"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.resize.js/node_modules/svg.select.js": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
"dependencies": {
"svg.js": "^2.2.5"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.select.js": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
"dependencies": {
"svg.js": "^2.6.5"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svgo": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@ -15266,6 +15409,29 @@
"url": "https://sweetalert2.github.io/#donations"
}
},
"node_modules/swiper": {
"version": "8.0.6",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
"integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"hasInstallScript": true,
"dependencies": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
},
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@ -20048,6 +20214,19 @@
"picomatch": "^2.0.4"
}
},
"apexcharts": {
"version": "3.33.1",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.33.1.tgz",
"integrity": "sha512-5aVzrgJefd8EH4w7oRmuOhA3+cxJxQg27cYg3ANVGvPCOB4AY3mVVNtFHRFaIq7bv8ws4GRaA9MWfzoWQw3MPQ==",
"requires": {
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
"svg.filter.js": "^2.0.2",
"svg.pathmorphing.js": "^0.1.3",
"svg.resize.js": "^1.4.3",
"svg.select.js": "^3.0.1"
}
},
"arg": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@ -20145,6 +20324,11 @@
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
},
"autobind-decorator": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz",
"integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E="
},
"autoprefixer": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
@ -21591,6 +21775,14 @@
"entities": "^2.0.0"
}
},
"dom7": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
"requires": {
"ssr-window": "^4.0.0"
}
},
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
@ -26603,6 +26795,14 @@
"object-assign": "^4.1.1"
}
},
"react-apexcharts": {
"version": "1.3.9",
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.3.9.tgz",
"integrity": "sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==",
"requires": {
"prop-types": "^15.5.7"
}
},
"react-app-polyfill": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@ -26723,6 +26923,15 @@
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"requires": {}
},
"react-input-range": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz",
"integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=",
"requires": {
"autobind-decorator": "^1.3.4",
"prop-types": "^15.5.8"
}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -27571,6 +27780,11 @@
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
},
"ssr-window": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
},
"stable": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@ -27778,6 +27992,70 @@
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
},
"svg.draggable.js": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
"requires": {
"svg.js": "^2.0.1"
}
},
"svg.easing.js": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
"integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
"requires": {
"svg.js": ">=2.3.x"
}
},
"svg.filter.js": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
"integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
"requires": {
"svg.js": "^2.2.5"
}
},
"svg.js": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
},
"svg.pathmorphing.js": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
"requires": {
"svg.js": "^2.4.0"
}
},
"svg.resize.js": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
"requires": {
"svg.js": "^2.6.5",
"svg.select.js": "^2.1.2"
},
"dependencies": {
"svg.select.js": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
"requires": {
"svg.js": "^2.2.5"
}
}
}
},
"svg.select.js": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
"requires": {
"svg.js": "^2.6.5"
}
},
"svgo": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@ -27854,6 +28132,15 @@
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.4.tgz",
"integrity": "sha512-o7owEtVtpqnB8y3BDCRn2taYb7URcf6RIUm120LjFxt8IHfPIm0UeHuiS3nEp5r9RKm5GlSSJOh/yuapUQcYcQ=="
},
"swiper": {
"version": "8.0.6",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
"integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
"requires": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
}
},
"symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

2
package.json
Unescape View File

@ -12,8 +12,10 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@themesberg/flowbite": "^1.3.0",
"apexcharts": "^3.33.1",
"date-fns": "^2.28.0",
"react": "^17.0.2",
"react-apexcharts": "^1.3.9",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-input-range": "^1.3.0",

6
src/App.js
Unescape View File

@ -54,6 +54,8 @@ import Playlist from "./components/Playlist";
import Folderlists from "./components/Folderlist";
import CardHolder from "./components/CardHolder";
import UploadFile from "./components/UploadFile";
import BarChartApex from "./components/BarChartApex";
import SemiDonut from "./components/SemiDonut";
// import Digikala from "./components/Digikala/ImageSlider";
@ -115,7 +117,9 @@ function App() {
{/* <Folderlists /> */}
{/* <Blogs /> */}
{/* <CardHolder /> */}
<UploadFile />
{/* <UploadFile /> */}
<BarChartApex />
<SemiDonut />
</div>
</Provider>
);

76
src/components/BarChartApex/index.js
Unescape View File

@ -0,0 +1,76 @@
import React, { Component } from "react";
// import ReactApexChart from "react-apexcharts";
// import ReactApexChart from "apexcharts";
import Chart from "react-apexcharts";
class BarChartApex extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
background: "#f4f4f4",
foreColor: "#333",
},
xaxis: {
categories: [
"New York",
"Los Angeles",
"Chicago",
"Houston",
"Philadelphia",
"Phoenix",
"San Antonio",
"San Diego",
"Dallas",
"San Jose",
],
},
plotOptions: {
bar: {
horizontal: false,
},
},
fill: {
colors: ["#F44336"],
},
dataLabels: {
enabled: false,
},
title: {
text: "Largest US Cities By Population",
align: "center",
margin: 20,
offsetY: 20,
style: {
fontSize: "25px",
},
},
},
series: [
{
name: "Population",
data: [
8550405, 3971883, 2720546, 2296224, 1567442, 1563025, 1469845,
1394928, 1300092, 1026908,
],
},
],
};
}
render() {
return (
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height="450"
width="100%"
/>
);
}
}
export default BarChartApex;

58
src/components/SemiDonut/index.js
Unescape View File

@ -0,0 +1,58 @@
import React, { Component } from "react";
// import ReactApexChart from "react-apexcharts";
// import ReactApexChart from "apexcharts";
import Chart from "react-apexcharts";
class SemiDonut extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
type: "donut",
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
offsetY: 10,
},
},
grid: {
padding: {
bottom: -80,
},
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
},
series: [44, 44, 44, 44, 44],
};
}
render() {
return (
<Chart
options={this.state.options}
series={this.state.series}
type="donut"
height="250"
width="100%"
/>
);
}
}
export default SemiDonut;

10
src/components/UploadFile/index.js
Unescape View File

@ -4,13 +4,13 @@ import file from "./images/file.svg";
const index = () => {
return (
<div className="bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300">
<div className=" cursor-pointer">
<img src={file} className="cursor-pointer relative" />
<div className="relative bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300">
<div className=" ">
<img src={file} className="" />
<input
type="file"
className="absolute top-10 opacity-0"
style={{ right: "0px" }}
className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
style={{ top: "39%" }}
name=""
/>
</div>

15595
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save