Compare commits

..

35 Commits

Author SHA1 Message Date
mahdi d12d82bc07 update src/components/Accordion/index.js, src/components/Tabbar/index.js and src/index.js 2 years ago
mahdi be63c248fa update src/components/Modal/index.js and src/components/Tabbar/index.js 2 years ago
mahdi 4944598023 update 6 files 2 years ago
mahdi 2c4239a1bd update src/components/Card/index.js and src/components/Modal/index.js 2 years ago
mahdi 016a672bee update src/components/Card/index.js 2 years ago
mahdi cd3b9847f3 update src/components/Button/index.js, src/components/Card/index.js and src/components/Modal/index.js 2 years ago
mahdi 89ca628076 update 2 files and delete 3 files 2 years ago
mahdi fe04b3e2d9 update App.js, src/components/Modal/index.js, src/components/ReactMonacoEditor/index.js and src/components/Tabbar/index.js 2 years ago
mahdi andalib b564c6e6d3 Merge branch 'master' of https://git.sitenevis.com/mahdi/sameh 2 years ago
mahdi andalib a4f6c5e314 trte 2 years ago
mahdi e39d373e16 build(deps): update package.json, App.js and yarn.lock 2 years ago
mahdi 51c6a43627 update App.js, src/components/Accordion/index.js, src/components/Questions/index.js and src/components/Settingss/index.js 2 years ago
mahdi d2277aa08d update src/components/Accordion/index.js and src/components/Modal/index.js 2 years ago
mahdi 4f910de219 update src/components/Modal/index.js, src/components/Settingss/index.js and src/components/Tabbar/index.js 2 years ago
mahdi 01034fc7de update src/components/Tabbar/index.js 2 years ago
mahdi c99b635b51 update src/components/Tabbar/index.js 2 years ago
mahdi e5914bc548 update App.js and src/components/Accordion/index.js 2 years ago
mahdi andalib 85150e2f7d update src/components/Tabbar/index.js 2 years ago
mahdi c6a5a152b0 chore: delete blue-cancle-icon.jpeg 2 years ago
mahdi d057c1d2e7 update App.js, src/components/Accordion/index.js and src/components/Card/index.js 2 years ago
mahdi 2b89b344e2 update src/components/Accordion/index.js and src/components/Questions/index.js 2 years ago
mahdi 31433e6377 build(deps): update package.json, src/components/Tabbar/index.js and yarn.lock 2 years ago
mahdi 3efe399fe8 update src/components/CustomSelectBox/index.js, src/components/RadioButton/index.js and src/components/Settingss/index.js 2 years ago
mahdi fa0d709565 ادامه کار | 100 2 years ago
mahdi andalib fca56638ec ';;' 2 years ago
mahdi andalib f331ab5c80 update src/components/CustomSelectBox/index.js, src/components/Modal/index.js, src/components/Tabbar/index.js and src/components/Tavabee/index.js ادامه کار 2 years ago
mahdi andalib 5027ead5eb update 4 files and delete 2 files ادامه کار 2 years ago
mahdi andalib a372083e77 update src/components/Modal/index.js ادامه کار 2 years ago
mahdi andalib 8da03b02ea ادامه کار | ساعت کاری را در ایشو هایی که درست کردم میزارم از این به بعد 2 years ago
mahdi andalib e8f62a62cb ادامه کار | 22 2 years ago
mahdi andalib 45e2b6c945 update src/components/Card/index.js اون بوردید سمت چپ طرح را اضافه کردم | 6 2 years ago
mahdi andalib a00dfbec62 ویریش یک سری از موارد |9 2 years ago
mahdi andalib 1b92e10a17 طرح جدید را اوکی کردم | 88 2 years ago
mahdi andalib 3cef3a6ea9 delete 12 files and update 1 file 2 years ago
mahdi andalib 9d81834a3c build(deps): update package-lock.json and yarn.lock اضافه کردن عکس ها مربوطه | 2 2 years ago
  1. 2846
      package-lock.json
  2. 4
      package.json
  3. 6
      public/images/blue-cancle-icon.svg
  4. 7
      public/images/blue-clock.svg
  5. 3
      public/images/blue-correct-thick-icon.svg
  6. 8
      public/images/blue-edit-icon.svg
  7. 7
      public/images/blue-email.svg
  8. 16
      public/images/blue-git-icon.svg
  9. BIN
      public/images/blue-hamburger-menu.jpeg
  10. 7
      public/images/blue-return.svg
  11. 9
      public/images/blue-start-function.svg
  12. 8
      public/images/blue-thick-box.svg
  13. 9
      public/images/blue-thick-clock.svg
  14. 9
      public/images/blue-thick-icon.svg
  15. 17
      public/images/blue-thick-mark.svg
  16. 4
      public/images/bluee-thick-icon.svg
  17. 87
      public/images/flower.svg
  18. 0
      public/images/square.svg
  19. 10
      public/images/wave-divider.svg
  20. 6
      public/images/white-cancel.svg
  21. 2
      src/App.js
  22. 169
      src/components/Accordion/index.js
  23. 85
      src/components/AnimatedInput/Input.js
  24. 22
      src/components/AnimatedInput/fixNumbers.js
  25. 6
      src/components/Button/index.js
  26. 159
      src/components/Card/index.js
  27. 71
      src/components/Checklist/index.js
  28. 18
      src/components/CircleInCircle/index.js
  29. 59
      src/components/Condition/index.js
  30. 2
      src/components/CustomSelectBox/index.js
  31. 33
      src/components/FormInput/index.js
  32. 50
      src/components/Modal/index.js
  33. 79
      src/components/Mokatebat/index.js
  34. 7
      src/components/Popup/index.js
  35. 23
      src/components/Questions/index.js
  36. 40
      src/components/RadioButton/index.js
  37. 105
      src/components/ReactMonacoEditor/index.js
  38. 136
      src/components/Settingss/index.js
  39. 78
      src/components/Tabbar/index.js
  40. 53
      src/components/Tavabee/index.js
  41. 6
      src/index.js
  42. 6
      src/index.scss
  43. 1
      src/logo.svg
  44. 2714
      yarn.lock

2846
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -6,9 +6,13 @@
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"monaco-editor-webpack-plugin": "^7.0.1",
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-monaco-editor": "^0.49.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="9.841" height="9.841" viewBox="0 0 9.841 9.841">
<g id="Group_2688" data-name="Group 2688" transform="translate(0.707 0.707)">
<line id="Line_367" data-name="Line 367" x2="8.427" y2="8.427" transform="translate(0 0)" fill="none" stroke="#3c58ea" stroke-linecap="round" stroke-width="1"/>
<line id="Line_368" data-name="Line 368" x1="8.427" y2="8.427" transform="translate(0 0)" fill="none" stroke="#3c58ea" stroke-linecap="round" stroke-width="1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 520 B

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10.981" height="11.302" viewBox="0 0 10.981 11.302">
<g id="Group_2707" data-name="Group 2707" transform="translate(-308 -174.004)">
<path id="Vector" d="M8.9,4.709A4.587,4.587,0,0,1,4.451,9.418,4.587,4.587,0,0,1,0,4.709,4.587,4.587,0,0,1,4.451,0,4.587,4.587,0,0,1,8.9,4.709Z" transform="translate(309.04 174.945)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,3.612l1.465-.871a1.042,1.042,0,0,0,.463-.81V0" transform="translate(312.054 178.007)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-3" data-name="Vector" d="M0,0H10.981V11.3H0Z" transform="translate(308 174.004)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 835 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.021" height="13.396" viewBox="0 0 15.021 13.396">
<path id="Vector" d="M-.8,5.717,2.918,10.4,10.713,0" transform="translate(2.558 1.75)" fill="none" stroke="#3c58ea" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
</svg>

After

Width:  |  Height:  |  Size: 293 B

@ -0,0 +1,8 @@
<svg id="vuesax_linear_edit" data-name="vuesax/linear/edit" xmlns="http://www.w3.org/2000/svg" width="8.439" height="8.439" viewBox="0 0 8.439 8.439">
<g id="edit">
<path id="Vector" d="M3.165,0h-.7C.7,0,0,.7,0,2.462v2.11C0,6.33.7,7.033,2.462,7.033h2.11c1.758,0,2.462-.7,2.462-2.462v-.7" transform="translate(0.703 0.703)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-2" data-name="Vector" d="M3.162.447.391,3.218a.954.954,0,0,0-.232.464L.007,4.741a.5.5,0,0,0,.6.6l1.058-.151a.985.985,0,0,0,.464-.232L4.9,2.184A1.068,1.068,0,0,0,4.9.447,1.068,1.068,0,0,0,3.162.447Z" transform="translate(2.479 0.615)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0A2.512,2.512,0,0,0,1.737,1.737" transform="translate(5.243 1.459)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H8.439V8.439H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,7 @@
<svg id="vuesax_linear_sms" data-name="vuesax/linear/sms" xmlns="http://www.w3.org/2000/svg" width="8.879" height="8.879" viewBox="0 0 8.879 8.879">
<g id="sms" transform="translate(0 0)">
<path id="Vector" d="M5.549,6.289H1.85A1.659,1.659,0,0,1,0,4.439V1.85A1.659,1.659,0,0,1,1.85,0h3.7A1.659,1.659,0,0,1,7.4,1.85v2.59A1.659,1.659,0,0,1,5.549,6.289Z" transform="translate(0.74 1.295)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-2" data-name="Vector" d="M3.7,0,2.542.925a1.171,1.171,0,0,1-1.387,0L0,0" transform="translate(2.59 3.33)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H8.879V8.879H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 820 B

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.752" height="12.752" viewBox="0 0 12.752 12.752">
<g id="Group_2708" data-name="Group 2708" transform="translate(-307 -189.004)">
<g id="Path_101" data-name="Path 101" transform="translate(313.376 189.004) rotate(45)" fill="none">
<path d="M2.675,0l3.6.029A2.75,2.75,0,0,1,8.988,2.747l.029,3.6A2.644,2.644,0,0,1,6.343,9.017l-3.6-.029A2.75,2.75,0,0,1,.029,6.27L0,2.675A2.644,2.644,0,0,1,2.675,0Z" stroke="none"/>
<path d="M 2.652297973632812 0.9999980926513672 C 2.205277919769287 0.9999980926513672 1.787807941436768 1.172677993774414 1.476787567138672 1.486227989196777 C 1.165737628936768 1.799808025360107 0.9964275360107422 2.218967914581299 1.000058174133301 2.666487693786621 L 1.029187679290771 6.261617660522461 C 1.036827564239502 7.205867767333984 1.811247825622559 7.980287551879883 2.755497932434082 7.987927913665771 L 6.36481761932373 8.017117500305176 C 6.811838150024414 8.017117500305176 7.229307651519775 7.844437599182129 7.540328025817871 7.530887603759766 C 7.851377964019775 7.217308044433594 8.020688056945801 6.798147678375244 8.017057418823242 6.350627899169922 L 7.987927913665771 2.755497932434082 C 7.980287551879883 1.811247825622559 7.205867767333984 1.036827564239502 6.261617660522461 1.029187679290771 L 2.652297973632812 0.9999980926513672 M 2.652294158935547 -2.86102294921875e-06 C 2.659732341766357 -2.86102294921875e-06 2.667134761810303 2.765655517578125e-05 2.674587726593018 8.7738037109375e-05 L 6.269717693328857 0.02921772003173828 C 7.758867740631104 0.04127788543701172 8.975837707519531 1.258247852325439 8.987897872924805 2.747397899627686 L 9.017027854919434 6.342527866363525 C 9.029088020324707 7.831677436828613 7.831692218780518 9.029088020324707 6.342527866363525 9.017027854919434 L 2.747397899627686 8.987897872924805 C 1.258247852325439 8.975837707519531 0.04127788543701172 7.758867740631104 0.02921772003173828 6.269717693328857 L 8.7738037109375e-05 2.674587726593018 C -0.01191139221191406 1.192890644073486 1.173525810241699 -2.86102294921875e-06 2.652294158935547 -2.86102294921875e-06 Z" stroke="none" fill="#046ae8"/>
</g>
<g id="hierarchy" transform="translate(311.287 193.078)">
<path id="Vector" d="M0,0V1.321" transform="translate(1.042 1.699)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-2" data-name="Vector" d="M1.354.614a.648.648,0,0,1-.677.614A.648.648,0,0,1,0,.614.648.648,0,0,1,.677,0,.648.648,0,0,1,1.354.614Z" transform="translate(0.417 0.378)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-3" data-name="Vector" d="M1.25.566a.6.6,0,0,1-.625.566A.6.6,0,0,1,0,.566.6.6,0,0,1,.625,0,.6.6,0,0,1,1.25.566Z" transform="translate(0.417 3.02)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-4" data-name="Vector" d="M1.25.566a.6.6,0,0,1-.625.566A.6.6,0,0,1,0,.566.6.6,0,0,1,.625,0,.6.6,0,0,1,1.25.566Z" transform="translate(3.333 3.02)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-5" data-name="Vector" d="M0,0A.835.835,0,0,0,.821.574l.715,0a1.246,1.246,0,0,1,1.181.757" transform="translate(1.069 1.699)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H5V4.53H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 392 B

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.249" height="11.508" viewBox="0 0 11.249 11.508">
<g id="Group_2711" data-name="Group 2711" transform="translate(-307.473 -229.5)">
<path id="Vector" d="M4.564,10.234C1.656,10.2,0,8.255,0,5.319A5.226,5.226,0,0,1,5.124,0a5.226,5.226,0,0,1,5.124,5.319" transform="translate(307.973 230)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<line id="Line_335" data-name="Line 335" y2="3.04" transform="translate(318.222 237.194)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,1.779V1.034C0,.114.606-.265,1.342.2l.594.373L2.53.944a.914.914,0,0,1,0,1.678l-.594.373-.594.373C.606,3.831,0,3.451,0,2.532Z" transform="translate(313.626 236.932)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 924 B

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.444" height="10.873" viewBox="0 0 11.444 10.873">
<g id="Group_2710" data-name="Group 2710" transform="translate(-308 -205.004)">
<g id="Path_100" data-name="Path 100" transform="translate(307.7 205.004)" fill="none" stroke-linecap="round">
<path d="M7.84,0A2.051,2.051,0,0,1,9.63,1.067l1.846,3.327a2.154,2.154,0,0,1,0,2.084L9.63,9.806a2.051,2.051,0,0,1-1.79,1.067H4.2a2.051,2.051,0,0,1-1.79-1.067L.569,6.478a2.154,2.154,0,0,1,0-2.084L2.415,1.067A2.051,2.051,0,0,1,4.2,0Z" stroke="none"/>
<path d="M 4.204748630523682 0.9999971389770508 C 3.828998565673828 0.9999971389770508 3.478239059448242 1.2115478515625 3.289328575134277 1.552107810974121 L 1.443658828735352 4.879417419433594 C 1.253108978271484 5.22293758392334 1.253108978271484 5.649737358093262 1.443658828735352 5.99326753616333 L 3.289328575134277 9.32056713104248 C 3.478239059448242 9.661117553710938 3.829009056091309 9.872677803039551 4.204748630523682 9.872677803039551 L 7.839869022369385 9.872677803039551 C 8.215608596801758 9.872677803039551 8.566378593444824 9.661117553710938 8.755289077758789 9.32056713104248 L 10.60095882415771 5.993257522583008 C 10.79150867462158 5.649737358093262 10.79150867462158 5.22293758392334 10.60095882415771 4.879407405853271 L 8.755278587341309 1.552107810974121 C 8.566378593444824 1.2115478515625 8.215619087219238 0.9999971389770508 7.839869022369385 0.9999971389770508 L 4.204748630523682 0.9999971389770508 M 4.204748630523682 -2.86102294921875e-06 L 7.839869022369385 -2.86102294921875e-06 C 8.580409049987793 -2.86102294921875e-06 9.263889312744141 0.4074478149414062 9.629758834838867 1.067037582397461 L 11.47542858123779 4.39433765411377 C 11.83384895324707 5.040477275848389 11.83384895324707 5.832197666168213 11.47542858123779 6.478337287902832 L 9.629758834838867 9.805637359619141 C 9.263889312744141 10.46521759033203 8.580409049987793 10.87267780303955 7.839869022369385 10.87267780303955 L 4.204748630523682 10.87267780303955 C 3.464208602905273 10.87267780303955 2.780729293823242 10.46521759033203 2.414858818054199 9.805637359619141 L 0.5691890716552734 6.478337287902832 C 0.2107686996459961 5.832187652587891 0.2107686996459961 5.040477275848389 0.5691890716552734 4.39433765411377 L 2.414858818054199 1.067037582397461 C 2.780729293823242 0.4074478149414062 3.464208602905273 -2.86102294921875e-06 4.204748630523682 -2.86102294921875e-06 Z" stroke="none" fill="#046ae8"/>
</g>
<path id="Vector" d="M0,1.382V.8C0,.089.475-.206,1.054.153l.466.29.466.29a.706.706,0,0,1,0,1.3l-.466.29-.466.29C.475,2.975,0,2.68,0,1.966Z" transform="translate(312.725 209.056)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@ -0,0 +1,8 @@
<svg id="vuesax_linear_clipboard-tick" data-name="vuesax/linear/clipboard-tick" xmlns="http://www.w3.org/2000/svg" width="8.879" height="8.879" viewBox="0 0 8.879 8.879">
<g id="clipboard-tick" transform="translate(0)">
<path id="Vector" d="M0,.925l.555.555L2.035,0" transform="translate(3.444 4.513)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-2" data-name="Vector" d="M.74,1.48H2.22c.74,0,.74-.37.74-.74C2.96,0,2.59,0,2.22,0H.74C.37,0,0,0,0,.74S.37,1.48.74,1.48Z" transform="translate(2.96 0.74)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-3" data-name="Vector" d="M4.809,0c1.232.067,1.85.522,1.85,2.212v2.22c0,1.48-.37,2.22-2.22,2.22H2.22C.37,6.652,0,5.912,0,4.432V2.212C0,.525.618.067,1.85,0" transform="translate(1.11 1.487)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H8.879V8.879H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10.9" height="11.267" viewBox="0 0 10.9 11.267">
<g id="Group_2712" data-name="Group 2712" transform="translate(-307.473 -262.5)">
<path id="Vector" d="M0,1.155,1.045,2.322,3.293,0" transform="translate(314.374 270.387)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,4.076l1.448-.983a1.219,1.219,0,0,0,.458-.914V0" transform="translate(311.683 265.938)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<g id="timer-pause" transform="translate(307.973 263)">
<path id="Vector-3" data-name="Vector" d="M4.919,10.267A5.032,5.032,0,0,1,0,5.133,5.032,5.032,0,0,1,4.919,0,5.032,5.032,0,0,1,9.839,5.133" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 923 B

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.008" height="10.763" viewBox="0 0 12.008 10.763">
<g id="Group_2709" data-name="Group 2709" transform="translate(-306.973 -246)">
<path id="Vector" d="M0,1.222,1.106,2.457,3.484,0" transform="translate(311.355 250.152)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<g id="Polygon_15" data-name="Polygon 15" transform="translate(306.973 246)" fill="none" stroke-linecap="round" stroke-linejoin="bevel">
<path d="M7.832,0A2,2,0,0,1,9.578,1.026l1.886,3.381a2,2,0,0,1,0,1.949L9.578,9.737a2,2,0,0,1-1.747,1.026H4.177A2,2,0,0,1,2.43,9.737L.544,6.356a2,2,0,0,1,0-1.949L2.43,1.026A2,2,0,0,1,4.177,0Z" stroke="none"/>
<path d="M 4.176520347595215 0.9999961853027344 C 3.814310073852539 0.9999961853027344 3.479680061340332 1.19649600982666 3.303210258483887 1.512825965881348 L 1.416850090026855 4.894296169281006 C 1.246670722961426 5.199356555938721 1.246670722961426 5.563596248626709 1.416840553283691 5.868646621704102 L 3.303210258483887 9.250125885009766 C 3.479680061340332 9.56645679473877 3.814310073852539 9.762956619262695 4.176520347595215 9.762956619262695 L 7.831780433654785 9.762956619262695 C 8.193990707397461 9.762956619262695 8.528620719909668 9.56645679473877 8.705080032348633 9.250136375427246 L 10.59145069122314 5.868646621704102 C 10.76163005828857 5.563596248626709 10.76163005828857 5.199356555938721 10.59144020080566 4.894296169281006 L 8.705090522766113 1.512825965881348 C 8.528620719909668 1.19649600982666 8.193990707397461 0.9999961853027344 7.831780433654785 0.9999961853027344 L 4.176520347595215 0.9999961853027344 M 4.176520347595215 -3.814697265625e-06 L 7.831780433654785 -3.814697265625e-06 C 8.556859970092773 -3.814697265625e-06 9.225150108337402 0.3924360275268555 9.578390121459961 1.025646209716797 L 11.46475028991699 4.407126426696777 C 11.80261039733887 5.01275634765625 11.80261039733887 5.75019645690918 11.46475028991699 6.355826377868652 L 9.578390121459961 9.737306594848633 C 9.225150108337402 10.37051677703857 8.556859970092773 10.7629566192627 7.831780433654785 10.7629566192627 L 4.176520347595215 10.7629566192627 C 3.451440811157227 10.7629566192627 2.783150672912598 10.37051677703857 2.429910659790039 9.737306594848633 L 0.5435400009155273 6.355826377868652 C 0.2056903839111328 5.75019645690918 0.2056903839111328 5.01275634765625 0.5435400009155273 4.407126426696777 L 2.429910659790039 1.025646209716797 C 2.783150672912598 0.3924360275268555 3.451440811157227 -3.814697265625e-06 4.176520347595215 -3.814697265625e-06 Z" stroke="none" fill="#046ae8"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

@ -0,0 +1,17 @@
<svg id="Group_2713" data-name="Group 2713" xmlns="http://www.w3.org/2000/svg" width="8.879" height="8.879" viewBox="0 0 8.879 8.879">
<g id="vuesax_linear_task-square" data-name="vuesax/linear/task-square" transform="translate(2.403 3.47)">
<g id="task-square" transform="translate(0)">
<path id="Vector" d="M0,0H1.942" transform="translate(0 0.555)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-2" data-name="Vector" d="M0,.555.277.832,1.11,0" transform="translate(2.963)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H1.942" transform="translate(0 2.509)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-4" data-name="Vector" d="M0,.555.277.832,1.11,0" transform="translate(2.963 1.954)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
</g>
</g>
<g id="vuesax_linear_clipboard-tick" data-name="vuesax/linear/clipboard-tick" transform="translate(0 0)">
<g id="clipboard-tick" transform="translate(0 0)">
<path id="Vector-5" data-name="Vector" d="M.74,1.48H2.22c.74,0,.74-.37.74-.74C2.96,0,2.59,0,2.22,0H.74C.37,0,0,0,0,.74S.37,1.48.74,1.48Z" transform="translate(2.96 0.74)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-6" data-name="Vector" d="M4.809,0c1.232.067,1.85.522,1.85,2.212v2.22c0,1.48-.37,2.22-2.22,2.22H2.22C.37,6.652,0,5.912,0,4.432V2.212C0,.525.618.067,1.85,0" transform="translate(1.11 1.487)" fill="none" stroke="#046ae8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H8.879V8.879H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,4 @@
<svg id="Group_5" data-name="Group 5" xmlns="http://www.w3.org/2000/svg" width="39.61" height="39.61" viewBox="0 0 39.61 39.61">
<path id="Path_1" data-name="Path 1" d="M19.805,0A19.805,19.805,0,1,1,0,19.805,19.805,19.805,0,0,1,19.805,0Z" fill="#fff"/>
<path id="Vector" d="M0,7.287l5.621,7.287L16.863,0" transform="translate(11.363 12.938)" fill="none" stroke="#245ce1" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</svg>

After

Width:  |  Height:  |  Size: 448 B

@ -0,0 +1,87 @@
<svg xmlns="http://www.w3.org/2000/svg" width="498.795" height="280.531" viewBox="0 0 498.795 280.531">
<g id="Group_35" data-name="Group 35" transform="translate(-192.899 -175.749)">
<g id="Group_22" data-name="Group 22" transform="translate(192.899 219.779)">
<path id="Path_2" data-name="Path 2" d="M224.283,422.663a22.2,22.2,0,0,1-10.66-2.736c-18.969-10.343-25.95-33.929-16.605-56.077,7.421-17.582,20.22-30.035,37.011-36.018,21.772-7.755,49.6-4.529,74.437,8.63,3.163,1.674,6.829,3.691,11.07,6.03,45.79,25.218,153.022,84.281,235.092,38.58,42.978-23.933,69.875-84.8,41.413-137.255a105.13,105.13,0,0,0-106.1-53.739,66.188,66.188,0,0,0-56.56,74.454,41.655,41.655,0,0,0,46.851,35.591,26.013,26.013,0,0,0,22.225-29.257,16.044,16.044,0,0,0-18.043-13.7l-.406-2.943A19.025,19.025,0,0,1,505.4,270.465a28.984,28.984,0,0,1-24.762,32.6,44.625,44.625,0,0,1-50.2-38.128,69.16,69.16,0,0,1,59.1-77.795A108.11,108.11,0,0,1,598.647,242.4c13.387,24.673,15.823,53.3,6.85,80.6-8.47,25.776-26.483,47.887-49.422,60.661-22.191,12.356-46.141,17.218-70.2,17.218-66.467,0-133.834-37.1-167.771-55.794-4.228-2.33-7.882-4.338-11.028-6-24.115-12.774-51.046-15.937-72.048-8.457-16.22,5.776-28.09,17.345-35.274,34.377-8.74,20.715-2.309,42.72,15.29,52.318a19.368,19.368,0,0,0,26.267-7.73,9.39,9.39,0,0,0-3.751-12.744,4.2,4.2,0,0,0-5.687,1.67l-2.6-1.421a7.165,7.165,0,0,1,9.713-2.854,12.359,12.359,0,0,1,4.935,16.77,22.178,22.178,0,0,1-13.3,10.732A22.433,22.433,0,0,1,224.283,422.663Z" transform="translate(-192.899 -186.162)" fill="#2d9179"/>
</g>
<g id="Group_23" data-name="Group 23" transform="translate(383.343 191.902)">
<path id="Path_3" data-name="Path 3" d="M349.5,421.946a119.06,119.06,0,0,1-37.688-6.575c-20.216-6.99-47.5-22.96-62.653-59.333-17.89-42.935-14.224-89.237,9.8-123.851a116.485,116.485,0,0,1,47.1-39.367c20.711-9.687,44.475-14.1,70.615-13.117l-.11,2.964c-50.048-1.873-90.945,16.309-115.174,51.21-23.447,33.777-27,79.021-9.5,121.018,14.732,35.358,41.24,50.876,60.881,57.671a113.409,113.409,0,0,0,39.494,6.347l.182,2.964C352.288,421.887,351.252,421.946,349.5,421.946Z" transform="translate(-237.938 -179.569)" fill="#2d9179"/>
</g>
<g id="Group_24" data-name="Group 24" transform="translate(563.357 226.6)">
<path id="Path_4" data-name="Path 4" d="M281.926,372.824l-1.416-2.609c16.03-8.711,49.367-44.961,44-95.93-3.3-31.358,4.74-58.251,22.06-73.782a48.1,48.1,0,0,1,43.295-11.548l-.63,2.9a45.193,45.193,0,0,0-40.682,10.859c-16.6,14.884-24.288,40.859-21.087,71.262C332.981,326.417,298.5,363.817,281.926,372.824Z" transform="translate(-280.51 -187.775)" fill="#2d9179"/>
</g>
<g id="Group_25" data-name="Group 25" transform="translate(510.636 280.918)">
<path id="Path_5" data-name="Path 5" d="M268.558,352.4l-.516-2.926a95.7,95.7,0,0,0,77.5-110.781c-2.186-12.393-9.7-23.954-19.595-30.17-7.658-4.812-16.043-6.135-24.237-3.827-9.844,2.765-16.093,11.489-14.537,20.284l-2.922.516c-1.822-10.3,5.336-20.474,16.652-23.658,9.032-2.537,18.237-1.1,26.626,4.173,10.584,6.647,18.605,18.973,20.939,32.166A98.686,98.686,0,0,1,268.558,352.4Z" transform="translate(-268.042 -200.621)" fill="#2d9179"/>
</g>
<path id="Path_6" data-name="Path 6" d="M289.379,206.433s.6,9.264-15.108,8.186c-13.273-.913-17.7,8.88-17.7,8.88S272,190.555,289.379,206.433Z" transform="translate(205.561 85.095)" fill="#2d9179"/>
<path id="Path_7" data-name="Path 7" d="M242.746,225.127s8.1,5.949,12.8-9.074a22.505,22.505,0,0,1,15.019-15.29S234.272,203.16,242.746,225.127Z" transform="translate(156.789 80.756)" fill="#2d9179"/>
<path id="Path_8" data-name="Path 8" d="M268.257,182.4s-1.239,9.2,14.508,9.2c13.307,0,17.053,10.072,17.053,10.072S286.685,167.751,268.257,182.4Z" transform="translate(243.216 9.626)" fill="#2d9179"/>
<path id="Path_9" data-name="Path 9" d="M343.019,195.886s-10.165,7.958-20.263,9.721S300.9,195.256,300.9,195.256s11.806-10.5,21.895-8.7S343.019,195.886,343.019,195.886Z" transform="translate(348.674 34.211)" fill="#c39500"/>
<path id="Path_10" data-name="Path 10" d="M278.051,228.037s-4.689-4.495-6.3-9.4,3.59-11.624,3.59-11.624,6.072,5.121,5.9,10.279S278.051,228.037,278.051,228.037Z" transform="translate(253.589 100.946)" fill="#c39500"/>
<path id="Path_11" data-name="Path 11" d="M314.044,195.818s-3.087,6.791-7.789,10.394-13.971.537-13.971.537,3.247-8.537,8.9-10.309S314.044,195.818,314.044,195.818Z" transform="translate(320.861 63.599)" fill="#2d9179"/>
<path id="Path_12" data-name="Path 12" d="M297.444,186.4s5.273,5.281,6.994,10.947-4.41,13.265-4.41,13.265-6.85-6.034-6.524-11.95S297.444,186.4,297.444,186.4Z" transform="translate(324.759 34.392)" fill="#2d9179"/>
<g id="Group_26" data-name="Group 26" transform="translate(499.089 238.821)">
<path id="Path_13" data-name="Path 13" d="M344.581,203.828c-.4-.258-40.136-25.256-78.484-1.319l-.786-1.26c39.155-24.44,79.668,1.07,80.074,1.328Z" transform="translate(-265.311 -190.665)" fill="#2d9179"/>
</g>
<path id="Path_14" data-name="Path 14" d="M284.727,194.03s-6.791-5.958-11.379,1.725c-3.045,5.1-9.751,6.6-12.389,4.774a13.488,13.488,0,0,0,10.258,5.357C279.953,206.09,286.452,198.7,284.727,194.03Z" transform="translate(219.728 51.91)" fill="#2d9179"/>
<path id="Path_15" data-name="Path 15" d="M244.383,201.207s7.222,7.484,13.222-.892c3.983-5.565,11.823-6.643,14.677-4.3a15.542,15.542,0,0,0-11.26-7.129C251.017,187.824,242.848,195.681,244.383,201.207Z" transform="translate(165.613 42.108)" fill="#2d9179"/>
<path id="Path_16" data-name="Path 16" d="M258.184,219.324s-8.668,5.738-12.715-3.734c-2.685-6.3-10.1-9.049-13.4-7.37a15.542,15.542,0,0,1,12.537-4.524C254.606,204.816,260.881,214.258,258.184,219.324Z" transform="translate(126.458 89.921)" fill="#2d9179"/>
<path id="Path_17" data-name="Path 17" d="M304.288,229.033s-9.751,3.62-11.535-6.52c-1.188-6.744-7.785-11.108-11.374-10.224a15.525,15.525,0,0,1,13.235-1.556C304.1,214.094,308.064,224.711,304.288,229.033Z" transform="translate(285.649 110.195)" fill="#2d9179"/>
<path id="Path_18" data-name="Path 18" d="M272.783,224.826s-7.049,7.649,1.662,13.146c5.789,3.658,7.324,11.417,5.142,14.4a15.524,15.524,0,0,0,6.465-11.654C286.534,230.67,278.212,222.974,272.783,224.826Z" transform="translate(249.207 157.549)" fill="#2d9179"/>
<path id="Path_19" data-name="Path 19" d="M272.86,207.6s8.8-5.535,12.622,4.034c2.533,6.36,9.882,9.29,13.218,7.687a15.538,15.538,0,0,1-12.643,4.224C276.09,222.186,270.044,212.6,272.86,207.6Z" transform="translate(255.913 97.694)" fill="#c39500"/>
<path id="Path_20" data-name="Path 20" d="M286.66,206.327s-10.275-1.594-10,8.7c.186,6.846-5.4,12.444-9.1,12.292a15.535,15.535,0,0,0,13.281-1.121C289.459,221,291.222,209.807,286.66,206.327Z" transform="translate(241.038 98.431)" fill="#c39500"/>
<path id="Path_21" data-name="Path 21" d="M293.888,238.124s-7.882.693-7.15-7.108c.486-5.184-3.476-9.713-6.288-9.789a11.816,11.816,0,0,1,10.026,1.522C296.755,227.125,297.524,235.713,293.888,238.124Z" transform="translate(282.653 145.195)" fill="#2d9179"/>
<path id="Path_22" data-name="Path 22" d="M265.425,233.687s-5.429,8.867-13.1,2c-5.091-4.571-12.977-3.928-15.252-1.015a15.525,15.525,0,0,1,9.446-9.4C256.046,222.058,265.725,227.957,265.425,233.687Z" transform="translate(142.601 156.938)" fill="#2d9179"/>
<path id="Path_23" data-name="Path 23" d="M264.323,228.725s-1.066-5.806,4.782-5.806c3.882,0,6.973-3.256,6.829-5.349a8.823,8.823,0,0,1-.431,7.552C272.687,230.086,266.365,231.257,264.323,228.725Z" transform="translate(230.343 135.016)" fill="#2d9179"/>
<path id="Path_24" data-name="Path 24" d="M279.408,191.364s2.943,5.112-2.567,7.07c-3.662,1.294-5.484,5.4-4.647,7.324a8.815,8.815,0,0,1-2.119-7.26C271.07,192.873,276.634,189.66,279.408,191.364Z" transform="translate(248.747 48.936)" fill="#2d9179"/>
<path id="Path_25" data-name="Path 25" d="M285.36,200.288s1.649-5.662-4.165-6.262c-3.865-.393-6.6-3.945-6.254-6.013a8.823,8.823,0,0,0-.338,7.552C276.9,200.8,283.068,202.6,285.36,200.288Z" transform="translate(261.506 39.593)" fill="#2d9179"/>
<path id="Path_26" data-name="Path 26" d="M259.309,254.1s8.309-6.258.727-13.235c-5.036-4.634-5.15-12.546-2.474-15.087a15.525,15.525,0,0,0-8.448,10.3C246.835,245.884,253.634,254.954,259.309,254.1Z" transform="translate(180.028 161.528)" fill="#2d9179"/>
<path id="Path_27" data-name="Path 27" d="M241.711,230.654s9.133,1.163,9.966-7.615c.554-5.831,6.212-10.715,9.535-10.66a15.05,15.05,0,0,0-12.14,1.213C240.726,218.193,237.948,227.779,241.711,230.654Z" transform="translate(152.267 115.847)" fill="#2d9179"/>
<path id="Path_28" data-name="Path 28" d="M258.224,218.824s-3.078,5.446,2.228,8.229c3.531,1.852,5.146,6.668,4.258,8.744a10.238,10.238,0,0,0,2.359-7.954C266.326,221.407,261.006,217.192,258.224,218.824Z" transform="translate(208.031 137.927)" fill="#2d9179"/>
<g id="Group_27" data-name="Group 27" transform="translate(392.574 288.525)">
<path id="Path_29" data-name="Path 29" d="M244.142,285.158c-.156-.516-15.167-51.684,13.835-82.738l1.083,1.015c-28.428,30.432-13.649,80.788-13.5,81.292Z" transform="translate(-240.121 -202.42)" fill="#2d9179"/>
</g>
<g id="Group_28" data-name="Group 28" transform="translate(216.41 427.506)">
<path id="Path_30" data-name="Path 30" d="M200.054,244.547a14.321,14.321,0,0,1,1.446-5.691c1.336-2.321,5.738-2.651,5.738-2.651s.127,4.127-1.924,5.852A14.96,14.96,0,0,1,200.054,244.547Z" transform="translate(-193.31 -232.331)" fill="#c39500"/>
<path id="Path_31" data-name="Path 31" d="M204.38,235.971s5.193,1.484,2.82,6.275c-1.577,3.188-.161,7.045,1.615,7.78a8.078,8.078,0,0,1-6.021-3.425C199.865,242.28,201.471,236.614,204.38,235.971Z" transform="translate(-189.475 -233.084)" fill="#c39500"/>
<path id="Path_32" data-name="Path 32" d="M213.2,237.575s-2.947-4.524-6.829-.846c-2.579,2.448-6.681,2.228-7.907.748a8.072,8.072,0,0,0,5.04,4.744C208.5,243.749,213.436,240.543,213.2,237.575Z" transform="translate(-198.459 -235.288)" fill="#c39500"/>
</g>
<g id="Group_29" data-name="Group 29" transform="translate(307.388 205.881)">
<path id="Path_33" data-name="Path 33" d="M379.543,409.823a266.532,266.532,0,0,1-57.321-17.535c-28.343-12.254-66.23-34.952-85.761-73.477-19.523-38.508-18.2-73.393-13.649-95.88,4.93-24.377,14.347-39.426,14.745-40.056l2.507,1.59c-.1.152-9.561,15.3-14.368,39.181-4.431,21.992-5.7,56.128,13.413,93.824s56.352,60.006,84.222,72.065A263.1,263.1,0,0,0,380,406.889Z" transform="translate(-219.975 -182.875)" fill="#2d9179"/>
</g>
<g id="Group_30" data-name="Group 30" transform="translate(429.726 272.614)">
<path id="Path_34" data-name="Path 34" d="M342.9,314.194c-5.463-15.878-18.081-19.074-32.686-22.774-14.013-3.548-29.895-7.573-43.312-23.337-27.43-32.233-15.37-69.059-15.243-69.427l2.106.715c-.118.355-11.759,36.022,14.829,67.27,12.96,15.222,28.474,19.155,42.166,22.622,15.231,3.856,28.39,7.193,34.246,24.208Z" transform="translate(-248.907 -198.657)" fill="#2d9179"/>
</g>
<path id="Path_35" data-name="Path 35" d="M222.153,199.613s4.922-7.518,14.106-6.6c0,0-6.372,3.011-7.412,12.719s-8.812,10.74-8.563,7.112S222.153,199.613,222.153,199.613Z" transform="translate(88.394 55.495)" fill="#2d9179"/>
<path id="Path_36" data-name="Path 36" d="M233.682,208.191c-5.176-3.577-10.761-6.279-17.438-4.44,0,0,6.981.93,10.922,9.865s10.322,4.173,10.322,4.173S238.862,211.773,233.682,208.191Z" transform="translate(75.369 88.487)" fill="#2d9179"/>
<path id="Path_37" data-name="Path 37" d="M224.672,224.095c2.034-5.958,4.918-11.451,11.379-13.95,0,0-5.057,4.9-2.918,14.432s-5.81,9.493-5.81,9.493S222.638,230.048,224.672,224.095Z" transform="translate(100.925 111.045)" fill="#2d9179"/>
<path id="Path_38" data-name="Path 38" d="M241.759,221.708c-6.14-1.379-12.33-1.784-17.835,2.423,0,0,6.825-1.755,13.831,5.049s11.129,0,11.129,0S247.9,223.086,241.759,221.708Z" transform="translate(100.163 145.293)" fill="#2d9179"/>
<path id="Path_39" data-name="Path 39" d="M195.6,227.656s9.971.3,11.083,8.313-6.3,18.867,2.127,23.075C208.81,259.043,189.233,257.394,195.6,227.656Z" transform="translate(4.61 167.578)" fill="#2d9179"/>
<path id="Path_40" data-name="Path 40" d="M234.814,219.645s3.552,10.44-4.313,14.7-21.979.782-23.07,11.142C207.431,245.485,205.883,217.18,234.814,219.645Z" transform="translate(46.87 141.224)" fill="#2d9179"/>
<path id="Path_41" data-name="Path 41" d="M234.427,225.888s-1.8-9.814-9.89-9.7-17.7,9.083-23.13,1.383C201.407,217.566,212.671,240.6,234.427,225.888Z" transform="translate(27.468 130.538)" fill="#2d9179"/>
<g id="Group_32" data-name="Group 32" transform="translate(418.917 302.391)">
<g id="Group_31" data-name="Group 31">
<path id="Path_42" data-name="Path 42" d="M257.444,218.566s8.478-4.127,7.975-9.928c-.317-3.62-4.279-3.349-6.495-2.08a3.158,3.158,0,0,1-3.467,0c-2.216-1.268-6.114-1.476-6.431,2.144C248.522,214.5,257.444,218.566,257.444,218.566Z" transform="translate(-237.781 -205.699)" fill="#c39500"/>
<path id="Path_43" data-name="Path 43" d="M260.568,218.979s.664-9.408-4.613-11.873c-3.29-1.535-5.036,2.034-5.044,4.584a3.152,3.152,0,0,1-1.734,3c-2.207,1.29-4.338,4.558-1.362,6.643C252.585,224.671,260.568,218.979,260.568,218.979Z" transform="translate(-246.351 -202.353)" fill="#c39500"/>
<path id="Path_44" data-name="Path 44" d="M260.549,213.516s-7.818-5.277-12.588-1.941c-2.977,2.08-.757,5.379,1.446,6.664a3.147,3.147,0,0,1,1.734,3c.013,2.554,1.78,6.034,5.07,4.5C261.488,223.275,260.549,213.516,260.549,213.516Z" transform="translate(-245.799 -190.298)" fill="#c39500"/>
<path id="Path_45" data-name="Path 45" d="M257.357,211.861s-8.478,4.131-7.975,9.928c.317,3.62,4.279,3.349,6.495,2.08a3.16,3.16,0,0,1,3.467,0c2.216,1.269,6.114,1.48,6.431-2.14C266.279,215.929,257.357,211.861,257.357,211.861Z" transform="translate(-236.632 -185.806)" fill="#c39500"/>
<path id="Path_46" data-name="Path 46" d="M252.56,213.571s-.664,9.412,4.613,11.873c3.29,1.539,5.036-2.034,5.045-4.584a3.153,3.153,0,0,1,1.738-3c2.2-1.285,4.334-4.558,1.357-6.643C260.544,207.879,252.56,213.571,252.56,213.571Z" transform="translate(-226.39 -191.274)" fill="#c39500"/>
<path id="Path_47" data-name="Path 47" d="M252.463,219.034s7.818,5.277,12.588,1.941c2.977-2.08.757-5.379-1.446-6.664a3.147,3.147,0,0,1-1.734-3c-.013-2.55-1.78-6.034-5.07-4.5C251.525,209.275,252.463,219.034,252.463,219.034Z" transform="translate(-226.825 -203.33)" fill="#c39500"/>
</g>
<path id="Path_48" data-name="Path 48" d="M276.782,221.411a14.548,14.548,0,1,1-14.55-14.55A14.546,14.546,0,0,1,276.782,221.411Z" transform="translate(-242.04 -201.948)" fill="#c39500"/>
<path id="Path_49" data-name="Path 49" d="M260.459,214.341a5.292,5.292,0,1,1-5.294-5.29A5.293,5.293,0,0,1,260.459,214.341Z" transform="translate(-234.973 -194.878)" fill="#fff"/>
</g>
<g id="Group_34" data-name="Group 34" transform="translate(480.158 411.059)">
<g id="Group_33" data-name="Group 33">
<path id="Path_50" data-name="Path 50" d="M271.924,244.268s8.482-4.131,7.975-9.933c-.313-3.62-4.279-3.345-6.491-2.08a3.143,3.143,0,0,1-3.467,0c-2.216-1.264-6.119-1.476-6.431,2.144C263.007,240.2,271.924,244.268,271.924,244.268Z" transform="translate(-252.262 -231.398)" fill="#c39500"/>
<path id="Path_51" data-name="Path 51" d="M275.054,244.676s.664-9.408-4.613-11.869c-3.294-1.539-5.036,2.034-5.049,4.584a3.155,3.155,0,0,1-1.734,3c-2.2,1.285-4.338,4.558-1.362,6.643C267.071,250.372,275.054,244.676,275.054,244.676Z" transform="translate(-260.834 -228.052)" fill="#c39500"/>
<path id="Path_52" data-name="Path 52" d="M275.03,239.216s-7.814-5.277-12.584-1.941c-2.977,2.08-.761,5.379,1.442,6.664a3.141,3.141,0,0,1,1.734,3c.013,2.55,1.78,6.034,5.074,4.5C275.968,248.975,275.03,239.216,275.03,239.216Z" transform="translate(-260.281 -215.996)" fill="#c39500"/>
<path id="Path_53" data-name="Path 53" d="M271.841,237.561s-8.482,4.127-7.975,9.928c.313,3.62,4.279,3.345,6.491,2.08a3.152,3.152,0,0,1,3.467,0c2.216,1.264,6.119,1.476,6.431-2.144C280.763,241.629,271.841,237.561,271.841,237.561Z" transform="translate(-251.114 -211.503)" fill="#c39500"/>
<path id="Path_54" data-name="Path 54" d="M267.044,239.271s-.664,9.408,4.613,11.873c3.294,1.535,5.036-2.034,5.049-4.584a3.16,3.16,0,0,1,1.734-3.006c2.2-1.285,4.338-4.558,1.357-6.639C275.027,233.579,267.044,239.271,267.044,239.271Z" transform="translate(-240.874 -216.972)" fill="#c39500"/>
<path id="Path_55" data-name="Path 55" d="M266.947,244.736s7.814,5.277,12.588,1.941c2.977-2.085.757-5.379-1.446-6.664a3.153,3.153,0,0,1-1.734-3c-.013-2.554-1.78-6.038-5.074-4.5C266.009,234.976,266.947,244.736,266.947,244.736Z" transform="translate(-241.306 -229.029)" fill="#c39500"/>
</g>
<path id="Path_56" data-name="Path 56" d="M291.269,247.107a14.55,14.55,0,1,1-14.55-14.546A14.552,14.552,0,0,1,291.269,247.107Z" transform="translate(-256.524 -227.645)" fill="#c39500"/>
<path id="Path_57" data-name="Path 57" d="M274.938,240.04a5.29,5.29,0,1,1-5.29-5.29A5.289,5.289,0,0,1,274.938,240.04Z" transform="translate(-249.454 -220.578)" fill="#fff"/>
</g>
<path id="Path_58" data-name="Path 58" d="M225.039,217.433s13.8,5.383,19.734-19.032c5.011-20.635,22.03-22.652,22.03-22.652S209.258,183.339,225.039,217.433Z" transform="translate(94.917 0)" fill="#2d9179"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="693.844" viewBox="0 0 1920 693.844">
<defs>
<linearGradient id="linear-gradient" x1="-0.201" y1="-0.405" x2="1" y2="1.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#000248" stop-opacity="0.31"/>
<stop offset="0.343" stop-color="#8eb7ff" stop-opacity="0.204"/>
<stop offset="1" stop-color="#07f" stop-opacity="0"/>
</linearGradient>
</defs>
<path id="Path_71" data-name="Path 71" d="M0,0H1920V540s-121.363-261.255-463.437-191.353S1204.969,638.421,840.828,686.26,0,540,0,540Z" fill="url(#linear-gradient)"/>
</svg>

After

Width:  |  Height:  |  Size: 672 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13.305" height="13.305" viewBox="0 0 13.305 13.305">
<g id="Group_2176" data-name="Group 2176" transform="translate(1.061 1.061)">
<path id="Vector" d="M11.072,11.072,0,0" transform="translate(0.112 0)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M11.072,0,0,11.072" transform="translate(0 0.112)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 555 B

@ -1,10 +1,12 @@
import "./App.scss";
import Card from "./components/Card";
import ReactMonacoEditor from "./components/ReactMonacoEditor";
function App() {
return (
<>
<Card />
{/* <ReactMonacoEditor /> */}
</>
);
}

@ -0,0 +1,169 @@
import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
function Accordion({ finalSpaceCharacters }) {
const [characters, updateCharacters] = useState(finalSpaceCharacters);
function handleOnDragEnd(result) {
if (!result.destination) return;
const items = Array.from(characters);
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);
updateCharacters(items);
}
return (
<section className="w-full mt-7">
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<section
className="characters w-full flex flex-col gap-y-4"
id="container"
{...provided.droppableProps}
ref={provided.innerRef}
>
{characters.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided) => (
<div
className="flex flex-col"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className="flex items-center w-full ">
<img
src="images/blue-hamburger-menu.jpeg"
alt=""
className="w-4 ml-2"
/>
<div className="w-full flex flex-row items-center justify-between px-3 py-4 bg-[#EEF5FF] rounded-sm cursor-pointer">
<p className="flex-1 mr-3 text-sm text-[#234F8E]">
{item.title}
</p>
<div className="bg-[#D4E7FF] p-2 rounded-sm">
<img
src="images/blue-cancle-icon.svg"
alt=""
className="w-3 "
/>
</div>
</div>
</div>
{provided.placeholder}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</section>
)}
</Droppable>
</DragDropContext>
</section>
);
}
export default Accordion;
Accordion.defaultProps = {
finalSpaceCharacters: [
{
id: "1",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "2",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "3",
name: "KVN",
thumb: "/images/kvn.png",
title:
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "4",
name: "Mooncake",
thumb: "/images/kvn.png",
title:
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "5",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
],
};

@ -0,0 +1,85 @@
import React, { useState } from "react";
import fixNumbers from "./fixNumbers";
const Input = ({
defaultValue,
set,
label,
borderClassname,
inputClassname,
placeholderClass,
activePlaceholderClass,
type,
maxLength,
max,
min,
register,
onClick,
icon,
}) => {
const [value, setValue] = useState(defaultValue);
console.log(value);
return (
<div
onClick={onClick}
className={
"h-full w-full flex flex-row items-center rounded relative bg-[#F9F9F9] " +
borderClassname +
(value ? " bg-white border rounded " : " bg-white ")
}
>
<div
className={
"text-xs absolute transition-all duration-300 pointer-events-none px-3 text-[#00253A] transform -translate-x-[4px]" +
(value
? ` ${activePlaceholderClass} + top-[-10px]`
: ` ${placeholderClass} + top-[10px]`)
}
>
{label}
</div>
{type !== "textarea" ? (
<input
{...register}
maxLength={maxLength}
value={value}
type={"text"}
onInput={(e) => {
let value = e.target.value;
if (type === "number")
value = fixNumbers(value).replace(/[^\d.-]/g, "");
if (maxLength && value.length > maxLength)
value = value.slice(0, maxLength);
if (!isNaN(max) && +e.target.value > max) value = max;
if (!isNaN(min) && +e.target.value < min) value = min;
e.target.value = value;
}}
className={`rtl w-full h-full outline-0 text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${inputClassname}
${!value ? "bg-[#F9F9F9] " : "bg-white"} `}
onChange={(e) => setValue(e.target.value)}
inputMode={type === "number" ? "numeric" : ""}
/>
) : (
<textarea
{...register}
className={`rtl w-full h-full text-[#00253A] p-4 outline-0 resize-none text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${
!value ? "bg-[#F9F9F9] " : "bg-white"
}`}
onChange={(e) => setValue(e.target.value)}
>
{value}
</textarea>
)}
{icon && <img src={icon} alt="calender" className="ml-2" />}
</div>
);
};
export default Input;
Input.defaultProps = {
inputClassname: "",
placeholderClass: "text-[#bdc3c7]",
activePlaceholderClass: "text-blue-600 bg-white",
icon: false,
};

@ -0,0 +1,22 @@
const persianNumbers = [
/۰/g,
/۱/g,
/۲/g,
/۳/g,
/۴/g,
/۵/g,
/۶/g,
/۷/g,
/۸/g,
/۹/g,
],
arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g],
fixNumbers = function (str) {
if (typeof str === "string") {
for (var i = 0; i < 10; i++) {
str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
}
}
return str;
};
export default fixNumbers;

@ -6,6 +6,8 @@ const Button = ({
iconHolderClassName,
icon,
text,
subTitle,
subTitleClass,
onClick,
sharpStyle,
clippath,
@ -19,6 +21,7 @@ const Button = ({
className={`flex items-center justify-center transiton ease-linear duration-200 ${className}`}
>
{text}
{subTitle && <span className={`${subTitleClass} mr-1`}>{subTitle}</span>}
{icon && (
<span className={`${iconHolderClassName}`}>
<img src={icon} alt="icon" className={`${iconClassName}`} />
@ -35,6 +38,9 @@ Button.defaultProps = {
"bg-primary text-primaryText hover:bg-primaryDark border border-b-4 border-primaryLight rounded text-sm px-4 py-4 hover:bg-opacity-90",
text: "اطلاعات بیشتر",
subTitle: false,
subTitleClass: "text-xs",
iconHolderClassName: "bg-secondary mr-2",
iconClassName: "w-4",
icon: false,

@ -1,99 +1,79 @@
import React, { useState } from "react";
import Button from "../Button";
import CircleInCircle from "../CircleInCircle";
import Modal from "../Modal";
import ax from "../../assets/images/square.svg";
import FormInput from "../FormInput";
const ProcessCard = ({ processes, title, hint, items, options }) => {
const [openModal, setOpenModal] = useState(false);
console.log(openModal);
const ProcessCard = ({ processes, title, hint, buttons, options }) => {
return (
<section className="w-fit mx-auto flex flex-row bg-surface border border-blue-400 rounded">
<section className="min-w-[75 0px] w-fit mx-auto flex flex-row bg-white border border-gray-300 rounded-md mt-5">
{/* right */}
<div className="flex flex-1 flex-col">
<div className="flex flex-1 flex-col justify-between">
{/* top */}
<div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-blue-400 divide-x-reverse">
<div className="flex items-center p-4 bg-[#EEFCE4] rounded-r divide-x-2 divide-[#C7C7C7] divide-x-reverse">
{processes.map((process, index) => (
<div
className="flex flex-row flex-1 items-center justify-center flex-grow"
className="flex flex-1 items-center justify-center flex-grow"
key={index}
>
{process.color && (
<div
className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`}
></div>
<CircleInCircle
parentClassName={`${process.color} w-[10px] h-[10px]`}
childClassName={false}
/>
)}
<p className="text-xs bg-blue-400">{process.name}</p>
<span className="text-xs mr-2 ">{process.content}</span>
<p className="text-xs mr-2">{process.name}</p>
<span className="text-xs mr-1">{process.content}</span>
</div>
))}
</div>
{/* middle */}
<div className="flex flex-col p-4 my-5 mr-5">
<h2 className="text-lg font-bold">{title}</h2>
<p className="text-sm text-justify leading-6 mt-3">{hint}</p>
<div className="flex flex-col flex-1 justify-center items-center p-4">
<div className="w-[96%] flex flex-col justify-center gap-y-4">
<h2 className="text-lg font-bold text-[#046AE8]">{title}</h2>
<p className="text-xs text-justify leading-6 text-[#00253A]">
{hint}
</p>
</div>
</div>
{/* bottom */}
<div className="flex flex-row item-center justify-around p-3 bg-gray-200 rounded ">
{/* right */}
<Button
text={"ویرایش"}
icon={ax}
iconHolderClassName={""}
iconClassName={"mr-2 w-5"}
className="p-2 bg-primary text-white text-sm rounded"
onClick={() => setOpenModal(true)}
/>
{/* left */}
<div className="flex-1 flex flex-row items-center justify-around divide-x-2 divide-blue-400 divide-x-reverse">
{items.map((item, i) => (
<div
key={i}
className="flex flex-row flex-1 items-center justify-center flex-grow"
>
<img src={item.icon} alt="" className="w-4 h-4 ml-1" />
<p className="text-xs ">{item.name}</p>
<p className="text-xs mr-1 ">{item.ans}</p>
</div>
))}
</div>
<div className="flex items-center justify-around p-2 bg-[#F8F8F8] rounded">
<Modal />
{buttons.map((btn, index) => (
<Button
key={index}
className={`${btn.className} rounded p-2 text-xs`}
iconHolderClassName={"bg-transparent mr-1"}
iconClassName={"w-5"}
icon={btn.icon}
text={btn.title}
subTitle={btn.subTitle}
/>
))}
</div>
</div>
{/* left */}
<div className="flex flex-col justify-center p-2 border-r border-blue-400 gap-y-4">
<div className="flex flex-col justify-center gap-y-4 p-2 border-r border-blue-400">
{options.map((option, j) => (
<div key={j} className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center">
<img src={option.icon} alt="icon" className="w-5" />
<p className="text-xs mr-1">{option.title}</p>
<div className="flex flex-col">
<div
key={j}
className="flex flex-row gap-x-7 items-center justify-between"
>
<div className="flex flex-row items-center">
<img
src={option.icon}
alt="icon"
className={`${j === 1 ? "w-7" : "w-6"}`}
/>
<p className="text-xs mr-1.5 text-[#00253A]">{option.title}</p>
</div>
<p className="text-xs text-[#00253A]">{option.content}</p>
</div>
<p className="text-xs mr-7">{option.content}</p>
{j === 2 && <hr className="mt-4 border border-[#F2F2F2]" />}
</div>
))}
</div>
{/* modal */}
<div
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
${openModal ? "opacity-60" : "opacity-0 pointer-events-none"}
`}
>
<div
className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm p-5"
onClick={(e) => e.stopPropagation()}
>
<Button
text={null}
icon={ax}
iconHolderClassName={""}
iconClassName={""}
className="p-2 bg-red-600 rounded self-end"
onClick={() => setOpenModal(false)}
/>
{/* <FormInput /> */}
</div>
</div>
</section>
);
};
@ -106,7 +86,7 @@ ProcessCard.defaultProps = {
processes: [
{
color: "bg-error",
color: "bg-[#51B708]",
name: "فرایند اجرایی",
content: 256,
},
@ -116,7 +96,7 @@ ProcessCard.defaultProps = {
content: "پرداخت شده",
},
{
color: "bg-info",
color: "bg-[#EE1010]",
name: "در حال انجام",
content: 55,
},
@ -127,52 +107,55 @@ ProcessCard.defaultProps = {
},
],
items: [
buttons: [
{
icon: ax,
name: "سوالات:",
ans: 5,
title: "سوالات:",
className: "border border-[#046AE8] text-[#046AE8]",
subTitle: "5",
icon: "images/blue-thick-box.svg",
},
{
icon: ax,
name: "چک لیست:",
ans: "تابع دارد",
title: "چک لیست:",
className: "border border-[#046AE8] text-[#046AE8]",
subTitle: "تابع دارد",
icon: "images/blue-thick-mark.svg",
},
{
icon: ax,
name: "مکاتبات:",
ans: "دارد",
title: "مکاتبات:",
className: "border border-[#046AE8] text-[#046AE8]",
subTitle: "1",
icon: "images/blue-email.svg",
},
],
options: [
{
icon: ax,
icon: "images/blue-clock.svg",
title: "تاخیر",
content: "5 ساعت",
},
{
icon: ax,
icon: "images/blue-git-icon.svg",
title: "شرایط اجرا",
content: "2 مورد",
},
{
icon: ax,
icon: "images/blue-start-function.svg",
title: "تابع شروع",
content: "ندارد",
},
{
icon: ax,
title: ثلث",
icon: "images/blue-return.svg",
title: هلت",
content: "5 ساعت",
},
{
icon: ax,
icon: "images/blue-thick-icon.svg",
title: "تایید خودکار",
content: "5 ساعت",
},
{
icon: ax,
icon: "images/blue-thick-clock.svg",
title: "تابع انجام",
content: "ندارد",
},

@ -0,0 +1,71 @@
import React from "react";
import { useForm } from "react-hook-form";
import Accordion from "../Accordion";
import CustomSelectBox from "../CustomSelectBox";
const Checklist = () => {
return (
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse">
<div className="flex-grow flex-1 flex flex-col pl-5">
<p className=" font-bold text-blue-600 text-left text-xs mb-2">
تابع انتخاب
</p>
<div className="flex flex-col gap-y-4">
<CustomSelectBox
options={[
{ title: "افزودن چک لیست" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
<Accordion />
</div>
<div className="flex-grow flex-1 flex flex-col pr-5">
<p className="font-bold text-[#00253A] text-sm mb-4">شرایط ایجاد</p>
<div className="flex flex-col gap-y-4">
<CustomSelectBox
options={[
{ title: "انتخاب سرویس" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انتخاب تابع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
<hr className="border border-gray-200 w-full my-5" />
<p className="font-bold text-[#00253A] text-sm mb-4">تابع فیلتر</p>
<div className="flex flex-col gap-y-4">
<CustomSelectBox
options={[
{ title: "انتخاب سرویس" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انتخاب تابع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
</div>
</div>
);
};
export default Checklist;

@ -0,0 +1,18 @@
import React from "react";
const CircleInCircle = ({ parentClassName, childClassName }) => {
return (
<div className={` ${parentClassName} w-5 h-5 rounded-full relative `}>
<div
className={`${childClassName} w-2 h-2 rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`}
></div>
</div>
);
};
export default CircleInCircle;
CircleInCircle.defaultProps = {
parentClassName: "bg-red-200",
childClassName: "bg-red-600",
};

@ -0,0 +1,59 @@
import React from "react";
import CustomSelectBox from "../CustomSelectBox";
const Condition = () => {
return (
<div className="w-full flex flex-row items-center justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse">
<div className="flex-grow flex-1 flex flex-col pl-5 ">
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]">
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "}
</div>
</div>
<div className="flex-grow flex-1 flex flex-col pr-5">
<div className="flex flex-col gap-y-7">
<CustomSelectBox
options={[
{ title: "محدودیت شبکه" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{
title:
"شناسه فرآیندهایی که باعث ابطال وظایف با فرآیند های فعلی می شود",
},
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{
title: "رفرنس هایی که شناسه ی آن ها ظروری است",
},
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{
title: "رفرنس هایی که باید در یک گردش کار یکتا باشند",
},
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
</div>
</div>
);
};
export default Condition;

@ -2,7 +2,7 @@ import React from "react";
const CustomSelectBox = ({ options }) => {
return (
<select className="customizeSelect rounded text-xs text-black py-2 bg-gray-200 focus:bg-white border-gray-200 focus:border-[#2483E1] focus:ring-transparent">
<select className="customizeSelect w-full rounded text-xs text-[#00253A] py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent">
{options.map((option, index) => (
<option className="text-black" key={index}>
{option.title}

@ -1,33 +0,0 @@
// it has style inside index.scss ---> // Start FormInput Component && end FormInput Component
import React from "react";
import CustomSelectBox from "../CustomSelectBox";
const FormInput = ({ items }) => {
return (
<div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-gray-400 divide-x-reverse ">
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
<CustomSelectBox />
</div>
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
<CustomSelectBox />
</div>
</div>
);
};
export default FormInput;
FormInput.defaultProps = {
items: [
{
title: "mahdi",
},
{
title: "mahdi",
},
{
title: "mahdi",
},
],
};

@ -0,0 +1,50 @@
import React, { useState } from "react";
import Button from "../Button";
import Tabbar from "../Tabbar";
const Modal = ({ activeTab, children }) => {
const [openModal, setOpenModal] = useState(false);
return (
<div>
<Button
className={`bg-[#046AE8] text-white rounded p-2 text-xs`}
iconHolderClassName={"bg-transparent mr-1"}
iconClassName={"w-5"}
icon={"images/blue-edit-icon.svg"}
text={"ویرایش"}
onClick={() => setOpenModal(true)}
/>
<div
className={`w-screen h-screen flex items-center justify-center bg-gray-600 bg-opacity-60 backdrop-filter backdrop-blur-sm fixed left-0 top-0 duration-300 transition-all ${
openModal ? "flex" : "hidden pointer-events-none"
}`}
>
<div className="min-w-[900px] w-fit min-h-[700px] flex flex-col justify-between bg-white border border-gray-400 rounded">
<div
className="p-3 flex flex-col"
onClick={(e) => e.stopPropagation()}
>
<Button
className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm mb-7"
text={false}
icon={"images/white-cancel.svg"}
iconHolderClassName={"mr-0"}
onClick={() => setOpenModal(false)}
/>
<Tabbar />
</div>
<div className="w-full flex flex-col items-end p-2 bg-[#e2dfdf]">
<Button
className="w-fit p-2 bg-[#3C58EA] text-white rounded-md text-sm"
text={"ذخیره و ثبت اطلاعات"}
iconHolderClassName={"mr-0"}
/>
</div>
</div>
</div>
</div>
);
};
export default Modal;

@ -0,0 +1,79 @@
import React from "react";
import { useForm } from "react-hook-form";
import Accordion from "../Accordion";
import Input from "../AnimatedInput/Input";
import CustomSelectBox from "../CustomSelectBox";
const Mokatebat = () => {
const { register, getValues } = useForm();
return (
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse">
<div className="flex-grow flex-1 flex flex-col pl-5">
<div className="flex flex-col gap-y-4">
<CustomSelectBox
options={[
{ title: "قالب نامه" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "جامعه هدف" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<Input
register={register("lastName")}
label="متن پیامک اطلاع رسانی"
type="textarea"
borderClassname={`border border-red-[#E3E3E3] `}
/>
</div>
<p className=" font-bold text-[#00253A] text-sm mt-4 mb-2">
تابع انتخاب
</p>
<div className="flex flex-col gap-y-4">
<CustomSelectBox
options={[
{ title: "انتخاب سرویس" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انتخاب تابع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
{/* <Accordion /> */}
</div>
<div className="flex-grow flex-1 flex flex-col pr-5">
<div>
<p className="font-bold text-[#00253A] text-sm">شرایط ایجاد</p>
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]">
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "}
</div>
</div>
<div className="mt-4">
<p className="font-bold text-[#00253A] text-sm">شرایط امضا</p>
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]">
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "}
</div>
</div>
</div>
</div>
);
};
export default Mokatebat;

@ -1,7 +0,0 @@
import React from "react";
const Popup = () => {
return <div>Popup</div>;
};
export default Popup;

@ -0,0 +1,23 @@
import React from "react";
import Accordion from "../Accordion";
import CustomSelectBox from "../CustomSelectBox";
const Questions = () => {
// const [selectedQuestion, setSelectedQuestion] = useState(null);
return (
<div className="w-full">
<CustomSelectBox
options={[
{ title: "انتخاب سوال" },
{ title: "سوال شماره ۱" },
{ title: "سوال شماره ۲" },
{ title: "سوال شماره ۳" },
]}
/>
<Accordion />
</div>
);
};
export default Questions;

@ -0,0 +1,40 @@
import React from "react";
const RadioButton = () => {
return (
<div className="relative">
<div className="flex items-center justify-between rounded py-4 bg-[#FBFBFB] focus:bg-[#f5f5f5] border border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent divide-x-2 divide-[#E3E3E3] divide-x-reverse">
<div className="flex items-center justify-center flex-1 pl-5">
<input
id="default-radio-1"
type="radio"
value=""
name="default-radio"
class="w-4 h-4 cursor-pointer"
checked="checked"
/>
<label for="default-radio-1" class="mr-2 text-xs text-[#00253A]">
بله
</label>
</div>
<div className="flex items-center justify-center flex-1 pl-5">
<input
id="default-radio-2"
type="radio"
value=""
name="default-radio"
class="w-4 h-4 cursor-pointer"
/>
<label for="default-radio-2" class="mr-2 text-xs text-[#00253A]">
خیر
</label>
</div>
</div>
<div class="absolute top-0 transform -translate-y-2.5 -translate-x-2 px-2 z-10 bg-white">
<p className="text-xs text-[#00253A]">آیا قابلیت ارجاع دارد؟</p>
</div>
</div>
);
};
export default RadioButton;

@ -0,0 +1,105 @@
// import React from "react";
// import { render } from "react-dom";
// import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
// class CodeEditor extends React.Component {
// constructor() {
// super();
// this.state = {
// code: "// type your code... \n",
// theme: "vs-light",
// };
// }
// onChange = (newValue) => {
// console.log("onChange", newValue); // eslint-disable-line no-console
// };
// editorDidMount = (editor) => {
// // eslint-disable-next-line no-console
// console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
// this.editor = editor;
// };
// changeEditorValue = () => {
// if (this.editor) {
// this.editor.setValue("// code changed! \n");
// }
// };
// changeBySetState = () => {
// this.setState({ code: "// code changed by setState! \n" });
// };
// setDarkTheme = () => {
// this.setState({ theme: "vs-dark" });
// };
// setLightTheme = () => {
// this.setState({ theme: "vs-light" });
// };
// render() {
// const { code, theme } = this.state;
// const options = {
// selectOnLineNumbers: true,
// roundedSelection: false,
// readOnly: false,
// cursorStyle: "line",
// automaticLayout: false,
// };
// return (
// <div>
// <div>
// <button onClick={this.changeEditorValue} type="button">
// Change value
// </button>
// <button onClick={this.changeBySetState} type="button">
// Change by setState
// </button>
// <button onClick={this.setDarkTheme} type="button">
// Set dark theme
// </button>
// <button onClick={this.setLightTheme} type="button">
// Set light theme
// </button>
// </div>
// <hr />
// <MonacoEditor
// height="400"
// language="javascript"
// value={code}
// options={options}
// onChange={this.onChange}
// editorDidMount={this.editorDidMount}
// theme={theme}
// />
// </div>
// );
// }
// }
// const ReactMonacoEditor = () => {
// return (
// <div>
// <h2>Monaco Editor Sample (controlled mode)</h2>
// <CodeEditor />
// <hr />
// <h2>Another editor (uncontrolled mode)</h2>
// {/* <AnotherEditor /> */}
// <hr />
// <h2>Another editor (showing a diff)</h2>
// {/* <DiffEditor /> */}
// </div>
// );
// };
// export default ReactMonacoEditor;
import React from "react";
const ReactMonacoEditor = () => {
return <div>ReactMonacoEditor</div>;
};
export default ReactMonacoEditor;

@ -0,0 +1,136 @@
import React from "react";
import { useForm } from "react-hook-form";
import CustomSelectBox from "../CustomSelectBox";
import Input from "../AnimatedInput/Input";
import CircleInCircle from "../CircleInCircle";
import RadioButton from "../RadioButton";
const Settingss = ({ status }) => {
const { register } = useForm();
return (
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse">
<div className="flex-grow flex-1 flex flex-col gap-y-7 pl-5">
<CustomSelectBox
options={[
{ title: "نام فرآیند" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<Input
register={register("lastName")}
label="توضیحات"
type="textarea"
borderClassname={`border border-red-[#E3E3E3] `}
/>
<CustomSelectBox
options={[
{ title: "اولویت دهی" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "نوع فرآیند" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<div className="flex items-center justify-between rounded py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent">
<p className="text-xs text-[#00253A] mr-5">وضیعت</p>
<div className="ml-1">
<CircleInCircle
parentClassName={`w-5 h-5 ${
status ? "bg-green-600" : "bg-red-600"
}`}
childClassName={false}
/>
</div>
</div>
<RadioButton />
<CustomSelectBox
options={[
{ title: "انتخاب نقش های قابل ارجاع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انتخاب نقش انجام دهنده" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
<div className="flex-grow flex-1 flex flex-col pr-5 gap-y-7">
<CustomSelectBox
options={[
{ title: "فرآیند مرجع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "فرآیندهای لینک" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<div className="w-full flex items-center gap-x-3">
<CustomSelectBox
options={[
{ title: "زمان تاخیر" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "مهلت انجام" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
<div className="w-full flex items-center gap-x-3">
<CustomSelectBox
options={[
{ title: "تایید خودکار" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انقضا" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
</div>
</div>
);
};
export default Settingss;
Settingss.defaultProps = {
status: true,
};

@ -0,0 +1,78 @@
import React, { useState } from "react";
import Button from "../Button";
import Checklist from "../Checklist";
import Condition from "../Condition";
import Mokatebat from "../Mokatebat";
import Questions from "../Questions";
import Settingss from "../Settingss";
import Tavabee from "../Tavabee";
const Tabbar = ({ tabs }) => {
const [activeTab, setActiveTab] = useState();
return (
<div className="flex flex-col ">
<div className="flex items-center">
{tabs.map((tab, index) => (
<Button
key={index}
text={tab.title}
className={`${tab.className} ${
activeTab === tab
? "bg-[#F1F3FF] text-[#3C58EA]"
: "bg-white text-[#333333]"
} w-full p-3 text-xs border border-b-2 border-t-2 border-[#3C58EA]`}
icon={activeTab === tab ? "images/blue-correct-thick-icon.svg" : ""}
onClick={() => setActiveTab(tab)}
/>
))}
</div>
<div className={`rounded w-full text-white flex items-center mt-5`}>
{activeTab?.components}
</div>
</div>
);
};
export default Tabbar;
Tabbar.defaultProps = {
tabs: [
{
title: "تنظیمات",
className: "rounded-tr-md rounded-br-md border-r-2",
components: <Settingss />,
active: true,
},
{
title: "سوالات",
className: "",
components: <Questions />,
active: false,
},
{
title: "چک لیست",
className: "",
components: <Checklist />,
active: false,
},
{
title: "مکاتبات",
className: "",
components: <Mokatebat />,
active: false,
},
{
title: "توابع",
className: "",
components: <Tavabee />,
active: false,
},
{
title: "شرایط و اجرا",
className: "rounded-tl-md rounded-bl-md border-l-2",
components: <Condition />,
active: false,
},
],
};

@ -0,0 +1,53 @@
import React from "react";
import CustomSelectBox from "../CustomSelectBox";
const Tavabee = () => {
return (
<div className="w-full flex flex-row items-center justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse">
<div className="flex-grow flex-1 flex flex-col pl-5">
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p>
<div className="flex flex-col gap-y-7">
<CustomSelectBox
options={[
{ title: "انتخاب سرویس" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انتخاب تابع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
</div>
<div className="flex-grow flex-1 flex flex-col pr-5">
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع پایان</p>
<div className="flex flex-col gap-y-7">
<CustomSelectBox
options={[
{ title: "انتخاب سرویس" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انتخاب تابع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
</div>
</div>
);
};
export default Tavabee;

@ -5,11 +5,7 @@ import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
root.render(<App />);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

@ -25,3 +25,9 @@ body {
.ltr {
direction: ltr;
}
// ? class for selectbox inside -->> CustomSelectBox <<--
.customizeSelect {
background-position: left 0.5rem center;
padding-right: 1rem;
}

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

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