reza added something

master
Reza_ashrafi 3 years ago
commit b6f473fd88
  1. 616
      package-lock.json
  2. 2
      package.json
  3. 23
      src/App.js
  4. 52
      src/components/Advertisement/design1/index.js
  5. 55
      src/components/Advertisement/design2/index.js
  6. 10
      src/components/Advertisement/design3/cart-icon.svg
  7. 91
      src/components/Advertisement/design3/index.js
  8. 8
      src/components/Advertisement/design3/map-icon.svg
  9. 5
      src/components/Advertisement/design3/setting-icon.svg
  10. 10
      src/components/Blogs/design2/BlogDesign2.js
  11. 3
      src/components/Blogs/design2/play-button.svg
  12. 139
      src/components/CourseChapter/index.js
  13. 62
      src/components/ProductImage/index.js
  14. 9
      src/components/ProductImage/index.scss
  15. 8
      src/components/ProductImage/product-chair.svg
  16. 8
      src/components/ProductImage/productImg.svg
  17. 11
      src/components/ProductStatusCard/arrow-icon.svg
  18. 11
      src/components/ProductStatusCard/delivery-icon.svg
  19. 12
      src/components/ProductStatusCard/icon-shop.svg
  20. 6
      src/components/ProductStatusCard/icon1.svg
  21. 120
      src/components/ProductStatusCard/index.js
  22. 6
      src/components/ProductStatusCard/info-circle.svg
  23. 5
      src/components/ProductStatusCard/shield-tick.svg
  24. 5
      src/components/ProductStatusCard/tick-circle.svg
  25. 146
      src/components/ProductSuggestion/index.js
  26. 51
      src/components/ProductTab/index.js
  27. 47
      src/components/ProductTab/table/index.js
  28. 3
      src/components/SidebarMenu/Vector.svg
  29. 4
      src/components/SidebarMenu/arrow-down.svg
  30. 7
      src/components/SidebarMenu/element-4.svg
  31. 6
      src/components/SidebarMenu/folder-open.svg
  32. 159
      src/components/SidebarMenu/index.js
  33. 9
      src/components/SidebarMenu/index.scss
  34. 6
      src/components/SidebarMenu/logout.svg
  35. 8
      src/components/SidebarMenu/message-text.svg
  36. 4
      src/components/SidebarMenu/moon.svg
  37. 8
      src/components/SidebarMenu/profile-pic.svg
  38. 5
      src/components/SidebarMenu/sms.svg
  39. 9
      src/components/SidebarMenu/user-edit.svg
  40. 8
      src/components/SidebarMenu/wallet-money.svg
  41. 13
      src/components/Switch/index.js
  42. 52
      src/components/Switch/index.scss
  43. BIN
      src/components/VodProduct/danovin.mp4
  44. 323
      src/components/VodProduct/index.js
  45. BIN
      src/components/VodProductNew/danovin.mp4
  46. 344
      src/components/VodProductNew/index.js
  47. 4
      src/components/counterDesign/CounterDesign.js
  48. 2
      src/components/productDesign/ProductDesign.js
  49. 63
      src/components/testtttt/Testttt.js
  50. BIN
      src/components/testtttt/danovin.mp4
  51. 4
      src/components/vodProductDesign/VodProductDesign.js
  52. 1
      src/index.js
  53. 20
      src/index.scss
  54. 7
      tailwind.config.js

616
package-lock.json generated

@ -15,6 +15,7 @@
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@themesberg/flowbite": "^1.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
@ -24,6 +25,7 @@
"redux": "^4.1.2",
"sass": "^1.45.0",
"sweetalert2": "^11.3.4",
"tw-elements": "^1.0.0-alpha8",
"web-vitals": "^2.1.2"
},
"devDependencies": {
@ -32,6 +34,146 @@
"tailwindcss": "^3.0.7"
}
},
"node_modules/@algolia/autocomplete-core": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.5.0.tgz",
"integrity": "sha512-E7+VJwcvwMM8vPeaVn7fNUgix8WHV8A1WUeHDi2KHemCaaGc8lvUnP3QnvhMxiDhTe7OpMEv4o2TBUMyDgThaw==",
"dependencies": {
"@algolia/autocomplete-shared": "1.5.0"
}
},
"node_modules/@algolia/autocomplete-preset-algolia": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.5.0.tgz",
"integrity": "sha512-iiFxKERGHkvkiupmrFJbvESpP/zv5jSgH714XRiP5LDvUHaYOo4GLAwZCFf2ef/L5tdtPBARvekn6k1Xf33gjA==",
"dependencies": {
"@algolia/autocomplete-shared": "1.5.0"
},
"peerDependencies": {
"@algolia/client-search": "^4.9.1",
"algoliasearch": "^4.9.1"
}
},
"node_modules/@algolia/autocomplete-shared": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.5.0.tgz",
"integrity": "sha512-bRSkqHHHSwZYbFY3w9hgMyQRm86Wz27bRaGCbNldLfbk0zUjApmE4ajx+ZCVSLqxvcUEjMqZFJzDsder12eKsg=="
},
"node_modules/@algolia/cache-browser-local-storage": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.12.0.tgz",
"integrity": "sha512-l+G560B6N1k0rIcOjTO1yCzFUbg2Zy2HCii9s03e13jGgqduVQmk79UUCYszjsJ5GPJpUEKcVEtAIpP7tjsXVA==",
"dependencies": {
"@algolia/cache-common": "4.12.0"
}
},
"node_modules/@algolia/cache-common": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.12.0.tgz",
"integrity": "sha512-2Z8BV+NX7oN7RmmQbLqmW8lfN9aAjOexX1FJjzB0YfKC9ifpi9Jl4nSxlnbU+iLR6QhHo0IfuyQ7wcnucCGCGQ=="
},
"node_modules/@algolia/cache-in-memory": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.12.0.tgz",
"integrity": "sha512-b6ANkZF6vGAo+sYv6g25W5a0u3o6F549gEAgtTDTVA1aHcdWwe/HG/dTJ7NsnHbuR+A831tIwnNYQjRp3/V/Jw==",
"dependencies": {
"@algolia/cache-common": "4.12.0"
}
},
"node_modules/@algolia/client-account": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.12.0.tgz",
"integrity": "sha512-gzXN75ZydNheNXUN3epS+aLsKnB/PHFVlGUUjXL8WHs4lJP3B5FtHvaA/NCN5DsM3aamhuY5p0ff1XIA+Lbcrw==",
"dependencies": {
"@algolia/client-common": "4.12.0",
"@algolia/client-search": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"node_modules/@algolia/client-analytics": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.12.0.tgz",
"integrity": "sha512-rO2cZCt00Opk66QBZb7IBGfCq4ZE3EiuGkXssf2Monb5urujy0r8CknK2i7bzaKtPbd2vlvhmLP4CEHQqF6SLQ==",
"dependencies": {
"@algolia/client-common": "4.12.0",
"@algolia/client-search": "4.12.0",
"@algolia/requester-common": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"node_modules/@algolia/client-common": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.12.0.tgz",
"integrity": "sha512-fcrFN7FBmxiSyjeu3sF4OnPkC1l7/8oyQ8RMM8CHpVY8cad6/ay35MrfRfgfqdzdFA8LzcBYO7fykuJv0eOqxw==",
"dependencies": {
"@algolia/requester-common": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"node_modules/@algolia/client-personalization": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.12.0.tgz",
"integrity": "sha512-wCJfSQEmX6ZOuJBJGjy+sbXiW0iy7tMNAhsVMV9RRaJE4727e5WAqwFWZssD877WQ74+/nF/VyTaB1+wejo33Q==",
"dependencies": {
"@algolia/client-common": "4.12.0",
"@algolia/requester-common": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"node_modules/@algolia/client-search": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.12.0.tgz",
"integrity": "sha512-ik6dswcTQtOdZN+8aKntI9X2E6Qpqjtyda/+VANiHThY9GD2PBXuNuuC2HvlF26AbBYp5xaSE/EKxn1DIiIJ4Q==",
"dependencies": {
"@algolia/client-common": "4.12.0",
"@algolia/requester-common": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"node_modules/@algolia/logger-common": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.12.0.tgz",
"integrity": "sha512-V//9rzLdJujA3iZ/tPhmKR/m2kjSZrymxOfUiF3024u2/7UyOpH92OOCrHUf023uMGYHRzyhBz5ESfL1oCdh7g=="
},
"node_modules/@algolia/logger-console": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.12.0.tgz",
"integrity": "sha512-pHvoGv53KXRIJHLk9uxBwKirwEo12G9+uo0sJLWESThAN3v5M+ycliU1AkUXQN8+9rds2KxfULAb+vfyfBKf8A==",
"dependencies": {
"@algolia/logger-common": "4.12.0"
}
},
"node_modules/@algolia/requester-browser-xhr": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.12.0.tgz",
"integrity": "sha512-rGlHNMM3jIZBwSpz33CVkeXHilzuzHuFXEEW1icP/k3KW7kwBrKFJwBy42RzAJa5BYlLsTCFTS3xkPhYwTQKLg==",
"dependencies": {
"@algolia/requester-common": "4.12.0"
}
},
"node_modules/@algolia/requester-common": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.12.0.tgz",
"integrity": "sha512-qgfdc73nXqpVyOMr6CMTx3nXvud9dP6GcMGDqPct+fnxogGcJsp24cY2nMqUrAfgmTJe9Nmy7Lddv0FyHjONMg=="
},
"node_modules/@algolia/requester-node-http": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.12.0.tgz",
"integrity": "sha512-mOTRGf/v/dXshBoZKNhMG00ZGxoUH9QdSpuMKYnuWwIgstN24uj3DQx+Ho3c+uq0TYfq7n2v71uoJWuiW32NMQ==",
"dependencies": {
"@algolia/requester-common": "4.12.0"
}
},
"node_modules/@algolia/transporter": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.12.0.tgz",
"integrity": "sha512-MOQVHZ4BcBpf3LtOY/3fqXHAcvI8MahrXDHk9QrBE/iGensQhDiZby5Dn3o2JN/zd9FMnVbdPQ8gnkiMwZiakQ==",
"dependencies": {
"@algolia/cache-common": "4.12.0",
"@algolia/logger-common": "4.12.0",
"@algolia/requester-common": "4.12.0"
}
},
"node_modules/@babel/code-frame": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
@ -1856,6 +1998,36 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
"integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
},
"node_modules/@docsearch/css": {
"version": "3.0.0-alpha.42",
"resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.0.0-alpha.42.tgz",
"integrity": "sha512-AGwI2AXUacYhVOHmYnsXoYDJKO6Ued2W+QO80GERbMLhC7GH5tfvtW5REs/s7jSdcU3vzFoxT8iPDBCh/PkrlQ=="
},
"node_modules/@docsearch/js": {
"version": "3.0.0-alpha.42",
"resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.0.0-alpha.42.tgz",
"integrity": "sha512-8rxxsvFKS5GzDX2MYMETeib4EOwAkoxVUHFP5R4tSENXojhuCEy3np+k3Q0c9WPT+MUmWLxKJab5jyl0jmaeBQ==",
"dependencies": {
"@docsearch/react": "3.0.0-alpha.42",
"preact": "^10.0.0"
}
},
"node_modules/@docsearch/react": {
"version": "3.0.0-alpha.42",
"resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.0.0-alpha.42.tgz",
"integrity": "sha512-1aOslZJDxwUUcm2QRNmlEePUgL8P5fOAeFdOLDMctHQkV2iTja9/rKVbkP8FZbIUnZxuuCCn8ErLrjD/oXWOag==",
"dependencies": {
"@algolia/autocomplete-core": "1.5.0",
"@algolia/autocomplete-preset-algolia": "1.5.0",
"@docsearch/css": "3.0.0-alpha.42",
"algoliasearch": "^4.0.0"
},
"peerDependencies": {
"@types/react": ">= 16.8.0 < 18.0.0",
"react": ">= 16.8.0 < 18.0.0",
"react-dom": ">= 16.8.0 < 18.0.0"
}
},
"node_modules/@eslint/eslintrc": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@ -2755,6 +2927,15 @@
"node": ">= 8"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@reduxjs/toolkit": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.7.1.tgz",
@ -3302,6 +3483,16 @@
"@testing-library/dom": ">=7.21.4"
}
},
"node_modules/@themesberg/flowbite": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@themesberg/flowbite/-/flowbite-1.3.0.tgz",
"integrity": "sha512-Tyrk2bbmhuzYK/3DwO6L7oSkMVil/VMiFpy6lFLoz3oD0lwCJhX3NhtNuzgveIX4l9zZ5GxYqKlp2BOzY+LiMQ==",
"dependencies": {
"@docsearch/js": "^3.0.0-alpha.42",
"@popperjs/core": "^2.9.3",
"mini-svg-data-uri": "^1.4.3"
}
},
"node_modules/@tootallnate/once": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@ -4099,6 +4290,27 @@
"ajv": "^6.9.1"
}
},
"node_modules/algoliasearch": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.12.0.tgz",
"integrity": "sha512-fZOMMm+F3Bi5M/MoFIz7hiuyCitJza0Hu+r8Wzz4LIQClC6YGMRq7kT6NNU1fSSoFDSeJIwMfedbbi5G9dJoVQ==",
"dependencies": {
"@algolia/cache-browser-local-storage": "4.12.0",
"@algolia/cache-common": "4.12.0",
"@algolia/cache-in-memory": "4.12.0",
"@algolia/client-account": "4.12.0",
"@algolia/client-analytics": "4.12.0",
"@algolia/client-common": "4.12.0",
"@algolia/client-personalization": "4.12.0",
"@algolia/client-search": "4.12.0",
"@algolia/logger-common": "4.12.0",
"@algolia/logger-console": "4.12.0",
"@algolia/requester-browser-xhr": "4.12.0",
"@algolia/requester-common": "4.12.0",
"@algolia/requester-node-http": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"node_modules/alphanum-sort": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
@ -4764,6 +4976,18 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"node_modules/bootstrap": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
},
"peerDependencies": {
"@popperjs/core": "^2.10.2"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -4945,6 +5169,40 @@
"node": ">=10"
}
},
"node_modules/chart.js": {
"version": "2.9.4",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
"dependencies": {
"chartjs-color": "^2.1.0",
"moment": "^2.10.2"
}
},
"node_modules/chartjs-color": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
"dependencies": {
"chartjs-color-string": "^0.6.0",
"color-convert": "^1.9.3"
}
},
"node_modules/chartjs-color-string": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
"dependencies": {
"color-name": "^1.0.0"
}
},
"node_modules/chartjs-plugin-datalabels": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz",
"integrity": "sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==",
"peerDependencies": {
"chart.js": ">= 2.7.0 < 3"
}
},
"node_modules/check-types": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@ -5728,6 +5986,11 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
},
"node_modules/custom-event-polyfill": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
"integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
},
"node_modules/damerau-levenshtein": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
@ -5886,6 +6149,14 @@
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
},
"node_modules/detect-autofill": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/detect-autofill/-/detect-autofill-1.1.4.tgz",
"integrity": "sha512-utCBQwCR/beSnADQmBC7C4tTueBBkYCl6WSpfGUkYKO/+MzPxqYGj6G4MvHzcKmH1gCTK+VunX2vaagvkRXPvA==",
"dependencies": {
"custom-event-polyfill": "^1.0.7"
}
},
"node_modules/detect-newline": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@ -11079,6 +11350,14 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/mini-svg-data-uri": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz",
"integrity": "sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==",
"bin": {
"mini-svg-data-uri": "cli.js"
}
},
"node_modules/minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -11111,6 +11390,14 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
"engines": {
"node": "*"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -11621,6 +11908,11 @@
"node": ">=8"
}
},
"node_modules/perfect-scrollbar": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
"integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
},
"node_modules/performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@ -11789,6 +12081,16 @@
"node": ">=4"
}
},
"node_modules/popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -12872,6 +13174,15 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
"node_modules/preact": {
"version": "10.6.4",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.6.4.tgz",
"integrity": "sha512-WyosM7pxGcndU8hY0OQlLd54tOU+qmG45QXj2dAYrL11HoyU/EzOSTlpJsirbBr1QW7lICxSsVJJmcmUglovHQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
}
},
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@ -15077,6 +15388,22 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
"node_modules/tw-elements": {
"version": "1.0.0-alpha8",
"resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha8.tgz",
"integrity": "sha512-feqb4XmHWH8KUOT7KEC3lc258VmypcI6ettdR9adN/dEfk9wXcp/G+XPOhnAAQiXeyTDOCuDF/GNo6kMN++YXw==",
"dependencies": {
"@popperjs/core": "^2.6.0",
"bootstrap": "^5.1.3",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"deepmerge": "^4.2.2",
"detect-autofill": "^1.1.3",
"perfect-scrollbar": "^1.5.0",
"popper.js": "^1.16.1",
"tailwindcss": "^3.0.7"
}
},
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -16262,6 +16589,142 @@
}
},
"dependencies": {
"@algolia/autocomplete-core": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.5.0.tgz",
"integrity": "sha512-E7+VJwcvwMM8vPeaVn7fNUgix8WHV8A1WUeHDi2KHemCaaGc8lvUnP3QnvhMxiDhTe7OpMEv4o2TBUMyDgThaw==",
"requires": {
"@algolia/autocomplete-shared": "1.5.0"
}
},
"@algolia/autocomplete-preset-algolia": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.5.0.tgz",
"integrity": "sha512-iiFxKERGHkvkiupmrFJbvESpP/zv5jSgH714XRiP5LDvUHaYOo4GLAwZCFf2ef/L5tdtPBARvekn6k1Xf33gjA==",
"requires": {
"@algolia/autocomplete-shared": "1.5.0"
}
},
"@algolia/autocomplete-shared": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.5.0.tgz",
"integrity": "sha512-bRSkqHHHSwZYbFY3w9hgMyQRm86Wz27bRaGCbNldLfbk0zUjApmE4ajx+ZCVSLqxvcUEjMqZFJzDsder12eKsg=="
},
"@algolia/cache-browser-local-storage": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.12.0.tgz",
"integrity": "sha512-l+G560B6N1k0rIcOjTO1yCzFUbg2Zy2HCii9s03e13jGgqduVQmk79UUCYszjsJ5GPJpUEKcVEtAIpP7tjsXVA==",
"requires": {
"@algolia/cache-common": "4.12.0"
}
},
"@algolia/cache-common": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.12.0.tgz",
"integrity": "sha512-2Z8BV+NX7oN7RmmQbLqmW8lfN9aAjOexX1FJjzB0YfKC9ifpi9Jl4nSxlnbU+iLR6QhHo0IfuyQ7wcnucCGCGQ=="
},
"@algolia/cache-in-memory": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.12.0.tgz",
"integrity": "sha512-b6ANkZF6vGAo+sYv6g25W5a0u3o6F549gEAgtTDTVA1aHcdWwe/HG/dTJ7NsnHbuR+A831tIwnNYQjRp3/V/Jw==",
"requires": {
"@algolia/cache-common": "4.12.0"
}
},
"@algolia/client-account": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.12.0.tgz",
"integrity": "sha512-gzXN75ZydNheNXUN3epS+aLsKnB/PHFVlGUUjXL8WHs4lJP3B5FtHvaA/NCN5DsM3aamhuY5p0ff1XIA+Lbcrw==",
"requires": {
"@algolia/client-common": "4.12.0",
"@algolia/client-search": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"@algolia/client-analytics": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.12.0.tgz",
"integrity": "sha512-rO2cZCt00Opk66QBZb7IBGfCq4ZE3EiuGkXssf2Monb5urujy0r8CknK2i7bzaKtPbd2vlvhmLP4CEHQqF6SLQ==",
"requires": {
"@algolia/client-common": "4.12.0",
"@algolia/client-search": "4.12.0",
"@algolia/requester-common": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"@algolia/client-common": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.12.0.tgz",
"integrity": "sha512-fcrFN7FBmxiSyjeu3sF4OnPkC1l7/8oyQ8RMM8CHpVY8cad6/ay35MrfRfgfqdzdFA8LzcBYO7fykuJv0eOqxw==",
"requires": {
"@algolia/requester-common": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"@algolia/client-personalization": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.12.0.tgz",
"integrity": "sha512-wCJfSQEmX6ZOuJBJGjy+sbXiW0iy7tMNAhsVMV9RRaJE4727e5WAqwFWZssD877WQ74+/nF/VyTaB1+wejo33Q==",
"requires": {
"@algolia/client-common": "4.12.0",
"@algolia/requester-common": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"@algolia/client-search": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.12.0.tgz",
"integrity": "sha512-ik6dswcTQtOdZN+8aKntI9X2E6Qpqjtyda/+VANiHThY9GD2PBXuNuuC2HvlF26AbBYp5xaSE/EKxn1DIiIJ4Q==",
"requires": {
"@algolia/client-common": "4.12.0",
"@algolia/requester-common": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"@algolia/logger-common": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.12.0.tgz",
"integrity": "sha512-V//9rzLdJujA3iZ/tPhmKR/m2kjSZrymxOfUiF3024u2/7UyOpH92OOCrHUf023uMGYHRzyhBz5ESfL1oCdh7g=="
},
"@algolia/logger-console": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.12.0.tgz",
"integrity": "sha512-pHvoGv53KXRIJHLk9uxBwKirwEo12G9+uo0sJLWESThAN3v5M+ycliU1AkUXQN8+9rds2KxfULAb+vfyfBKf8A==",
"requires": {
"@algolia/logger-common": "4.12.0"
}
},
"@algolia/requester-browser-xhr": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.12.0.tgz",
"integrity": "sha512-rGlHNMM3jIZBwSpz33CVkeXHilzuzHuFXEEW1icP/k3KW7kwBrKFJwBy42RzAJa5BYlLsTCFTS3xkPhYwTQKLg==",
"requires": {
"@algolia/requester-common": "4.12.0"
}
},
"@algolia/requester-common": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.12.0.tgz",
"integrity": "sha512-qgfdc73nXqpVyOMr6CMTx3nXvud9dP6GcMGDqPct+fnxogGcJsp24cY2nMqUrAfgmTJe9Nmy7Lddv0FyHjONMg=="
},
"@algolia/requester-node-http": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.12.0.tgz",
"integrity": "sha512-mOTRGf/v/dXshBoZKNhMG00ZGxoUH9QdSpuMKYnuWwIgstN24uj3DQx+Ho3c+uq0TYfq7n2v71uoJWuiW32NMQ==",
"requires": {
"@algolia/requester-common": "4.12.0"
}
},
"@algolia/transporter": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.12.0.tgz",
"integrity": "sha512-MOQVHZ4BcBpf3LtOY/3fqXHAcvI8MahrXDHk9QrBE/iGensQhDiZby5Dn3o2JN/zd9FMnVbdPQ8gnkiMwZiakQ==",
"requires": {
"@algolia/cache-common": "4.12.0",
"@algolia/logger-common": "4.12.0",
"@algolia/requester-common": "4.12.0"
}
},
"@babel/code-frame": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
@ -17490,6 +17953,31 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
"integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
},
"@docsearch/css": {
"version": "3.0.0-alpha.42",
"resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.0.0-alpha.42.tgz",
"integrity": "sha512-AGwI2AXUacYhVOHmYnsXoYDJKO6Ued2W+QO80GERbMLhC7GH5tfvtW5REs/s7jSdcU3vzFoxT8iPDBCh/PkrlQ=="
},
"@docsearch/js": {
"version": "3.0.0-alpha.42",
"resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.0.0-alpha.42.tgz",
"integrity": "sha512-8rxxsvFKS5GzDX2MYMETeib4EOwAkoxVUHFP5R4tSENXojhuCEy3np+k3Q0c9WPT+MUmWLxKJab5jyl0jmaeBQ==",
"requires": {
"@docsearch/react": "3.0.0-alpha.42",
"preact": "^10.0.0"
}
},
"@docsearch/react": {
"version": "3.0.0-alpha.42",
"resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.0.0-alpha.42.tgz",
"integrity": "sha512-1aOslZJDxwUUcm2QRNmlEePUgL8P5fOAeFdOLDMctHQkV2iTja9/rKVbkP8FZbIUnZxuuCCn8ErLrjD/oXWOag==",
"requires": {
"@algolia/autocomplete-core": "1.5.0",
"@algolia/autocomplete-preset-algolia": "1.5.0",
"@docsearch/css": "3.0.0-alpha.42",
"algoliasearch": "^4.0.0"
}
},
"@eslint/eslintrc": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@ -18128,6 +18616,11 @@
}
}
},
"@popperjs/core": {
"version": "2.11.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
},
"@reduxjs/toolkit": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.7.1.tgz",
@ -18476,6 +18969,16 @@
"@babel/runtime": "^7.12.5"
}
},
"@themesberg/flowbite": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@themesberg/flowbite/-/flowbite-1.3.0.tgz",
"integrity": "sha512-Tyrk2bbmhuzYK/3DwO6L7oSkMVil/VMiFpy6lFLoz3oD0lwCJhX3NhtNuzgveIX4l9zZ5GxYqKlp2BOzY+LiMQ==",
"requires": {
"@docsearch/js": "^3.0.0-alpha.42",
"@popperjs/core": "^2.9.3",
"mini-svg-data-uri": "^1.4.3"
}
},
"@tootallnate/once": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@ -19128,6 +19631,27 @@
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"requires": {}
},
"algoliasearch": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.12.0.tgz",
"integrity": "sha512-fZOMMm+F3Bi5M/MoFIz7hiuyCitJza0Hu+r8Wzz4LIQClC6YGMRq7kT6NNU1fSSoFDSeJIwMfedbbi5G9dJoVQ==",
"requires": {
"@algolia/cache-browser-local-storage": "4.12.0",
"@algolia/cache-common": "4.12.0",
"@algolia/cache-in-memory": "4.12.0",
"@algolia/client-account": "4.12.0",
"@algolia/client-analytics": "4.12.0",
"@algolia/client-common": "4.12.0",
"@algolia/client-personalization": "4.12.0",
"@algolia/client-search": "4.12.0",
"@algolia/logger-common": "4.12.0",
"@algolia/logger-console": "4.12.0",
"@algolia/requester-browser-xhr": "4.12.0",
"@algolia/requester-common": "4.12.0",
"@algolia/requester-node-http": "4.12.0",
"@algolia/transporter": "4.12.0"
}
},
"alphanum-sort": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
@ -19630,6 +20154,12 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"bootstrap": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"requires": {}
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -19761,6 +20291,38 @@
"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
"integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
},
"chart.js": {
"version": "2.9.4",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
"requires": {
"chartjs-color": "^2.1.0",
"moment": "^2.10.2"
}
},
"chartjs-color": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
"requires": {
"chartjs-color-string": "^0.6.0",
"color-convert": "^1.9.3"
}
},
"chartjs-color-string": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
"requires": {
"color-name": "^1.0.0"
}
},
"chartjs-plugin-datalabels": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz",
"integrity": "sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==",
"requires": {}
},
"check-types": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@ -20333,6 +20895,11 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
},
"custom-event-polyfill": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
"integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
},
"damerau-levenshtein": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
@ -20450,6 +21017,14 @@
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
},
"detect-autofill": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/detect-autofill/-/detect-autofill-1.1.4.tgz",
"integrity": "sha512-utCBQwCR/beSnADQmBC7C4tTueBBkYCl6WSpfGUkYKO/+MzPxqYGj6G4MvHzcKmH1gCTK+VunX2vaagvkRXPvA==",
"requires": {
"custom-event-polyfill": "^1.0.7"
}
},
"detect-newline": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@ -24217,6 +24792,11 @@
}
}
},
"mini-svg-data-uri": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz",
"integrity": "sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA=="
},
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -24243,6 +24823,11 @@
"minimist": "^1.2.5"
}
},
"moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -24603,6 +25188,11 @@
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
},
"perfect-scrollbar": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
"integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
},
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@ -24724,6 +25314,11 @@
}
}
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -25359,6 +25954,11 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
"preact": {
"version": "10.6.4",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.6.4.tgz",
"integrity": "sha512-WyosM7pxGcndU8hY0OQlLd54tOU+qmG45QXj2dAYrL11HoyU/EzOSTlpJsirbBr1QW7lICxSsVJJmcmUglovHQ=="
},
"prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@ -26992,6 +27592,22 @@
}
}
},
"tw-elements": {
"version": "1.0.0-alpha8",
"resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha8.tgz",
"integrity": "sha512-feqb4XmHWH8KUOT7KEC3lc258VmypcI6ettdR9adN/dEfk9wXcp/G+XPOhnAAQiXeyTDOCuDF/GNo6kMN++YXw==",
"requires": {
"@popperjs/core": "^2.6.0",
"bootstrap": "^5.1.3",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"deepmerge": "^4.2.2",
"detect-autofill": "^1.1.3",
"perfect-scrollbar": "^1.5.0",
"popper.js": "^1.16.1",
"tailwindcss": "^3.0.7"
}
},
"type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

@ -10,6 +10,7 @@
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@themesberg/flowbite": "^1.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
@ -19,6 +20,7 @@
"redux": "^4.1.2",
"sass": "^1.45.0",
"sweetalert2": "^11.3.4",
"tw-elements": "^1.0.0-alpha8",
"web-vitals": "^2.1.2"
},
"scripts": {

@ -25,6 +25,17 @@ import Feedback from "./components/Feedback/index";
import Alert from "./components/Alert";
import Toast from "./components/Toast";
import ProductSuggestion from "./components/ProductSuggestion";
import ProductImage from "./components/ProductImage";
import VodProduct from "./components/VodProduct";
import VodProductNew from "./components/VodProductNew";
import ProductTab from "./components/ProductTab";
import ProductStatusCard from "./components/ProductStatusCard";
import AdvertisementDesign1 from "./components/Advertisement/design1";
import AdvertisementDesign2 from "./components/Advertisement/design2";
import AdvertisementDesign3 from "./components/Advertisement/design3";
import CourseChapter from "./components/CourseChapter";
import SidebarMenu from "./components/SidebarMenu";
import Switch from "./components/Switch";
function App() {
return (
@ -32,6 +43,8 @@ function App() {
<div className="App">
{/* <ProductDesign /> */}
{/* <VodProductDesign /> */}
{/* <VodProduct /> */}
{/* <VodProductNew /> */}
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
@ -51,7 +64,15 @@ function App() {
{/* <Feedback /> */}
{/* <Alert /> */}
{/* <Toast /> */}
<ProductSuggestion />
{/* <ProductSuggestion /> */}
{/* <ProductImage /> */}
{/* <ProductTab /> */}
{/* <ProductStatusCard /> */}
{/* <AdvertisementDesign1 /> */}
{/* <AdvertisementDesign2 /> */}
{/* <AdvertisementDesign3 /> */}
{/* <CourseChapter /> */}
<SidebarMenu />
</div>
</Provider>
);

@ -0,0 +1,52 @@
import React from "react";
const AdvertisementDesign1 = () => {
return (
<section className="mx-auto bg-white m-10 w-full sm:w-8/12 md:w-5/12 lg:w-3/12">
<div
className="w-full h-96 rounded-3xl relative overflow-hidden"
style={{ backgroundColor: "#E3F2FF" }}
>
<div
style={{
width: "calc(100vw / 10)",
height: "calc(100vw / 10)",
left: "20%",
top: "15%",
}}
className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30"
></div>
<div
style={{
width: "calc(100vw / 7)",
height: "calc(100vw / 7)",
right: "25%",
bottom: "4%",
}}
className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md"
></div>
<div
style={{
width: "calc(100vw / 8)",
height: "calc(100vw / 8)",
right: "3%",
top: "15%",
}}
className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md"
></div>
<div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50">
<h2 className="text-lg">تبلیغات دانوینی</h2>
<p className="text-sm text-justify leading-6 mt-2">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است.
</p>
</div>
<button className="rounded-sm text-base border p-3 w-6/12 absolute left-1/2 bottom-2 transform -translate-x-1/2 -translate-y-1/2 z-50">
دانلود اپلیکیشن
</button>
</div>
</section>
);
};
export default AdvertisementDesign1;

@ -0,0 +1,55 @@
import React from "react";
const AdvertisementDesign2 = () => {
return (
<section className="mx-auto bg-white m-10 w-4/12 p-2">
<div
className="h-56 rounded-3xl relative"
style={{ backgroundColor: "#E3F2FF" }}
>
<div className="flex flex-col justify-center p-10 w-7/12">
<h2 className="text-lg">تبلیغات دانوینی</h2>
<p className="text-sm text-justify leading-6 mt-2">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است.
</p>
<button className="rounded-lg text-sm border p-3 w-8/12 mx-auto bg-darkCrimsonBgColor text-white mt-2">
دانلود اپلیکیشن
</button>
</div>
<div
style={{
backgroundColor: "#00FFFF33",
width: "calc(100vw / 15)",
height: "calc(100vw / 15)",
left: "20%",
top: "15%",
}}
className="rounded-full absolute z-20 backdrop-filter backdrop-blur-md"
></div>
<div
style={{
backgroundColor: "#6E6EEF66",
width: "calc(100vw / 10)",
height: "calc(100vw / 10)",
left: "7%",
bottom: "-15%",
}}
className="rounded-full absolute z-10 backdrop-filter backdrop-blur-md"
></div>
<div
style={{
backgroundColor: "white",
width: "calc(100vw / 12)",
height: "calc(100vw / 12)",
left: "0%",
top: "10%",
}}
className="rounded-full absolute backdrop-filter backdrop-blur-md"
></div>
</div>
</section>
);
};
export default AdvertisementDesign2;

@ -0,0 +1,10 @@
<svg id="vuesax_linear_bag-happy" data-name="vuesax/linear/bag-happy" xmlns="http://www.w3.org/2000/svg" width="54.237" height="54.237" viewBox="0 0 54.237 54.237">
<g id="bag-happy" transform="translate(0)">
<path id="Vector" d="M0,0A7.948,7.948,0,0,0,7.91,7.91,7.948,7.948,0,0,0,15.819,0" transform="translate(19.209 32.203)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M8.181,0,0,8.2" transform="translate(11.729 4.52)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0,8.181,8.2" transform="translate(34.328 4.52)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,4.52C0,.339,2.237,0,5.017,0H40.181C42.96,0,45.2.339,45.2,4.52c0,4.859-2.237,4.52-5.017,4.52H5.017C2.237,9.04,0,9.379,0,4.52Z" transform="translate(4.52 13.22)" fill="none" stroke="#132f52" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0,3.186,19.525c.723,4.384,2.463,7.593,8.927,7.593H25.74c7.028,0,8.068-3.073,8.881-7.322L38.418,0" transform="translate(7.91 22.599)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-width="2"/>
<path id="Vector-6" data-name="Vector" d="M0,0H54.237V54.237H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,91 @@
import React from "react";
import cart from "./cart-icon.svg";
import map from "./map-icon.svg";
import setting from "./setting-icon.svg";
const AdvertisementDesign3 = ({ features }) => {
return (
<section className="mx-auto bg-white m-10 w-full sm:w-5/12 p-2">
<div
className="rounded-3xl relative"
style={{ backgroundColor: "#E3F2FF" }}
>
<div className="flex flex-col justify-center p-10 w-8/12">
<h2 className="text-lg text-productPrice z-50">تبلیغات دانوینی</h2>
<p className="text-sm text-justify leading-6 mt-2 text-productPrice z-50">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است.
</p>
<div className="mt-3">
{features.map((feature, i) => (
<div className="flex flex-row items-center mt-2">
<img src={feature.icon} alt="" className="w-6 h-6 z-50" />
<p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light z-50">
{feature.title}
</p>
</div>
))}
</div>
</div>
<div
style={{
backgroundColor: "#00FFFF22",
width: "calc(100vw / 15)",
height: "calc(100vw / 15)",
left: "8%",
top: "20%",
}}
className="rounded-full absolute z-20 bg-opacity-30 backdrop-filter backdrop-blur-md"
></div>
<div
style={{
backgroundColor: "#6E6EEF22",
width: "calc(100vw / 10)",
height: "calc(100vw / 10)",
left: "17%",
top: "10%",
}}
className="rounded-full absolute bg-opacity-30 backdrop-filter backdrop-blur-md"
></div>
<div
style={{
backgroundColor: "#06BACE22",
width: "calc(100vw / 11)",
height: "calc(100vw / 11)",
left: "12%",
bottom: "2%",
}}
className="rounded-full absolute"
></div>
<div className="absolute bottom-5 left-10">
<button className="border-2 border-blue-500 text-blue-500 ml-4 rounded p-2 text-sm">
تماس با ما
</button>
<button className="bg-blue-500 border-2 border-blue-500 text-white rounded p-2 text-sm">
به سلامت
</button>
</div>
</div>
</section>
);
};
export default AdvertisementDesign3;
AdvertisementDesign3.defaultProps = {
features: [
{
icon: cart,
title: "قابلیت های فروشگاهی بسیار پیشرفته و ساده",
},
{
icon: map,
title: "ارسال به تمام نقاط ایران",
},
{
icon: setting,
title: "تنظیمات پیشرفته و بیش از 2000 ماژول اختصاصی",
},
],
};

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="54.237" height="54.238" viewBox="0 0 54.237 54.238">
<g id="map" transform="translate(0 0)">
<path id="Vector" d="M0,10.039V32.027c0,4.294,3.051,6.057,6.757,3.932l5.311-3.028a5.043,5.043,0,0,1,4.271-.113L28.2,38.762a5.126,5.126,0,0,0,4.271-.113l9.785-5.6a5.061,5.061,0,0,0,2.282-3.932V7.123c0-4.294-3.051-6.057-6.757-3.932L32.475,6.219a5.043,5.043,0,0,1-4.271.113L16.339.411a5.126,5.126,0,0,0-4.271.113l-9.785,5.6A5,5,0,0,0,0,10.039Z" transform="translate(5.175 7.543)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0V29.379" transform="translate(19.345 9.04)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0V30.237" transform="translate(35.548 14.961)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H54.237V54.238H0Z" transform="translate(54.237 54.238) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,5 @@
<svg id="setting-2" xmlns="http://www.w3.org/2000/svg" width="54.605" height="54.605" viewBox="0 0 54.605 54.605">
<path id="Vector" d="M13.651,6.826A6.826,6.826,0,1,1,6.826,0,6.826,6.826,0,0,1,13.651,6.826Z" transform="translate(20.477 20.477)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,23.478v-4A4.336,4.336,0,0,1,4.323,15.15c4.118,0,5.8-2.912,3.731-6.484A4.321,4.321,0,0,1,9.647,2.773L13.583.521A3.8,3.8,0,0,1,18.77,1.886l.25.432c2.048,3.572,5.415,3.572,7.485,0l.25-.432A3.8,3.8,0,0,1,31.944.521L35.88,2.773a4.321,4.321,0,0,1,1.593,5.893c-2.07,3.572-.387,6.484,3.731,6.484a4.336,4.336,0,0,1,4.323,4.323v4A4.336,4.336,0,0,1,41.2,27.8c-4.118,0-5.8,2.912-3.731,6.484a4.315,4.315,0,0,1-1.593,5.893L31.944,42.43a3.8,3.8,0,0,1-5.187-1.365l-.25-.432c-2.048-3.572-5.415-3.572-7.485,0l-.25.432a3.8,3.8,0,0,1-5.187,1.365L9.647,40.178a4.321,4.321,0,0,1-1.593-5.893c2.07-3.572.387-6.484-3.731-6.484A4.336,4.336,0,0,1,0,23.478Z" transform="translate(4.55 5.827)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H54.6V54.6H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -8,6 +8,8 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
import playBtn from "./play-button.svg";
const BlogDesign2 = ({
blogSubTitle,
dateButton,
@ -45,6 +47,7 @@ const BlogDesign2 = ({
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
backgroundColor: "red",
}}
>
{dateButton && (
@ -100,6 +103,13 @@ const BlogDesign2 = ({
}}
className="absolute right-0 bottom-0 h-full w-full"
></div>
<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
>
<img src={playBtn} alt="" />
</div>
</div>
</div>
</section>
);

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="27.552" height="29.311" viewBox="0 0 27.552 29.311">
<path id="Vector" d="M0,14.659v-6C0,.919,5.472-2.2,12.16,1.648l5.188,3,5.188,3c6.688,3.851,6.688,10.174,0,14.024l-5.188,3-5.188,3C5.472,31.521,0,28.359,0,20.658Z" fill="#06bace"/>
</svg>

After

Width:  |  Height:  |  Size: 289 B

@ -0,0 +1,139 @@
import React, { useState } from "react";
const CourseChapter = ({ chapters }) => {
const [selectedLesson, setSelectedLesson] = useState(null);
return (
<section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
<div
className="rounded py-5 px-4 relative"
style={{ backgroundColor: "#196EC033" }}
>
{/* top */}
<div className="flex flex-row items-center justify-between">
<div>
<h2 className="text-blue-800 text-base">سرفصل دوره</h2>
</div>
<div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
<span className="text-blue-800 text-sm px-2">علوم تجربی</span>
<span className="text-blue-800 text-sm px-2">پایه ششم</span>
</div>
</div>
{/* divider */}
<div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
{/* course title */}
{chapters.map((chapter, index) => (
<div className="flex flex-col" key={index}>
<div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
<p className="text-sm text-white">{chapter.title}</p>
<span className="text-sm text-white">{chapter.duration}</span>
</div>
{/* course lessons */}
{chapter.lessons.map((lesson, i) => (
<div
className="flex flex-row items-center justify-around"
key={i}
>
{/* right div dot dot */}
<div
className="flex items-center relative flex-col "
style={{ width: "10%", transform: "translateY(30px)" }}
>
<div
className={`flex justify-center items-center w-4 h-4 rounded-full
${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
${lesson.passed ? "bg-red-600" : "bg-blue-600"}
`}
></div>
<span
className="w-1"
style={{
borderRight: "2px dotted yellow",
transform: "translateX(-1px)",
height: "65px",
}}
></span>
</div>
{/* left div content */}
<div
className={`mt-2 bg-white border border-blue-600 flex flex-col rounded-md cursor-pointer transition duration-200 ease-in-out group hover:bg-blue-600
${selectedLesson === lesson ? "bg-blue-600" : ""}`}
style={{ width: "80%" }}
onClick={() => setSelectedLesson(lesson)}
>
{/* top */}
<div className="flex flex-row items-center justify-between p-2">
<p
className={`text-sm text-blue-500 group-hover:text-white
${selectedLesson === lesson ? "text-red-600" : ""}`}
>
{lesson.title}
</p>
<span
className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
${selectedLesson === lesson ? "text-red-600" : ""}`}
>
{lesson.duration}
</span>
</div>
{/* divider */}
<div
className={`border-t border-blue-600 group-hover:border-white ${
selectedLesson === lesson ? "border-red-600" : ""
}`}
></div>
{/* bottom */}
<span
className={`text-xs text-center text-blue-500 group-hover:text-white p-2
${selectedLesson === lesson ? "text-red-600" : ""}`}
>
{lesson.play}
</span>
</div>
</div>
))}
</div>
))}
{/* blue left border */}
<div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div>
</div>
</section>
);
};
export default CourseChapter;
CourseChapter.defaultProps = {
chapters: [
{
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
duration: "2:30:13",
lessons: [
{
title: "آیا گوگل از ما دزدی میکند؟",
duration: "14:30",
play: "پخش",
passed: true,
},
{
title: "چگونگی ساخت نیروگاه های برقی",
duration: "22:31",
play: "در حال پخش",
passed: true,
},
{
title: "آیا از اینترنت می توان درآمد داشت؟",
duration: "10:09",
play: "نمایش",
passed: false,
},
{
title: "زمین سبز و آسمان آبی",
duration: "56:09",
play: "نمایش",
passed: false,
},
],
},
],
};

@ -0,0 +1,62 @@
import React from "react";
import "./index.scss";
import productImg from "./productImg.svg";
const ProductImage = ({ images }) => {
console.log(images.length);
return (
<section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg">
<div className="w-4/12 flex flex-row h-72">
<div className="flex flex-col items-center justify-between ml-4 w-16">
{images.slice(0, 4).map((image, index) => (
<div className="relative">
<img
key={index}
src={productImg}
alt=""
className={`rounded-sm h-full`}
// style={{ height: "calc(100% - 8px)" }}
// style={{ height: "calc(100% - 8px)" }}
/>
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
{Number(index) === 3 && (
<div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
<strong>+ {images.length - 3}</strong>
</div>
)}
</div>
))}
</div>
<img src={productImg} alt="" className="h-full" />
</div>
</section>
);
};
// {[0, 1, 2, 3, 4].map((item, index) => (
// ))}
export default ProductImage;
ProductImage.defaultProps = {
images: [
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
],
};

@ -0,0 +1,9 @@
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 39 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 39 KiB

@ -0,0 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="41.268" height="41.268" viewBox="0 0 41.268 41.268">
<path id="Vector" d="M0,0H17.195" transform="translate(20.634 9.56)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(20.634 3.439)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H17.195" transform="translate(3.439 29.334)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(3.439 23.213)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<g id="Group-2" data-name="Group" transform="translate(3.439 3.439)">
<path id="Vector-5" data-name="Vector" d="M12.036,0A12.028,12.028,0,0,1,0,12.036L1.805,9.027" transform="translate(22.353 22.353)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,12.036A12.028,12.028,0,0,1,12.036,0L10.231,3.009" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
<path id="Vector-7" data-name="Vector" d="M0,0H41.268V41.268H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -0,0 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="51.463" height="51.463" viewBox="0 0 51.463 51.463">
<path id="Vector" d="M20.349,25.732h2.144a4.3,4.3,0,0,0,4.289-4.289V0H7.484A8.569,8.569,0,0,0,0,4.4" transform="translate(5.382 4.289)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,25.732a6.424,6.424,0,0,0,6.433,6.433H8.577a4.289,4.289,0,0,1,8.577,0h8.577a4.289,4.289,0,0,1,8.577,0h2.144a6.424,6.424,0,0,0,6.433-6.433V19.3H36.453a2.151,2.151,0,0,1-2.144-2.144V10.722a2.151,2.151,0,0,1,2.144-2.144h2.766L35.553,2.166A4.324,4.324,0,0,0,31.822,0H27.876V15.01A4.3,4.3,0,0,1,23.587,19.3H21.443" transform="translate(4.289 10.722)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(12.866 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(30.02 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M8.577,6.433v4.289H2.144A2.151,2.151,0,0,1,0,8.577V2.144A2.151,2.151,0,0,1,2.144,0H4.91Z" transform="translate(38.598 19.299)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H12.866" transform="translate(4.289 17.154)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H8.577" transform="translate(4.289 23.587)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-8" data-name="Vector" d="M0,0H4.289" transform="translate(4.289 30.02)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-9" data-name="Vector" d="M0,0H51.463V51.463H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -0,0 +1,12 @@
<svg id="Group_207" data-name="Group 207" xmlns="http://www.w3.org/2000/svg" width="45.601" height="45.601" viewBox="0 0 45.601 45.601">
<g id="Path_95" data-name="Path 95" transform="translate(0 0)" fill="#fff">
<path d="M 33.83258438110352 44.8504524230957 L 11.76785469055176 44.8504524230957 C 8.824884414672852 44.8504524230957 6.058054447174072 43.70439529418945 3.977064371109009 41.62339401245117 C 1.896064281463623 39.54239273071289 0.7500042915344238 36.77556610107422 0.7500042915344238 33.83258438110352 L 0.7500042915344238 8.825894355773926 C 0.7500042915344238 4.372834205627441 4.372834205627441 0.7500042915344238 8.825894355773926 0.7500042915344238 L 36.77455520629883 0.7500042915344238 C 41.24808502197266 0.7500042915344238 44.8504524230957 6.086584091186523 44.8504524230957 10.50503444671631 L 44.8504524230957 33.83258438110352 C 44.8504524230957 36.77556610107422 43.70439529418945 39.54239273071289 41.62339401245117 41.62339401245117 C 39.54239273071289 43.70439529418945 36.77556610107422 44.8504524230957 33.83258438110352 44.8504524230957 Z" stroke="none"/>
<path d="M 8.825893402099609 1.499996185302734 C 4.786384582519531 1.499996185302734 1.499996185302734 4.786384582519531 1.499996185302734 8.825893402099609 L 1.499996185302734 33.83258438110352 C 1.499996185302734 39.49430465698242 6.106132507324219 44.10044479370117 11.76785278320312 44.10044479370117 L 33.83258438110352 44.10044479370117 C 39.49430465698242 44.10044479370117 44.10044479370117 39.49430465698242 44.10044479370117 33.83258438110352 L 44.10044479370117 10.50503540039062 C 44.10044479370117 8.442455291748047 43.25521469116211 6.143684387207031 41.83945465087891 4.355815887451172 C 40.994873046875 3.289253234863281 39.21379470825195 1.499996185302734 36.77455520629883 1.499996185302734 L 8.825893402099609 1.499996185302734 M 8.825893402099609 -3.814697265625e-06 L 36.77455520629883 -3.814697265625e-06 C 41.64896392822266 -3.814697265625e-06 45.60044479370117 5.630622863769531 45.60044479370117 10.50503540039062 L 45.60044479370117 33.83258438110352 C 45.60044479370117 40.33179473876953 40.33179473876953 45.60044479370117 33.83258438110352 45.60044479370117 L 11.76785278320312 45.60044479370117 C 5.268653869628906 45.60044479370117 -3.814697265625e-06 40.33179473876953 -3.814697265625e-06 33.83258438110352 L -3.814697265625e-06 8.825893402099609 C -3.814697265625e-06 3.951484680175781 3.951484680175781 -3.814697265625e-06 8.825893402099609 -3.814697265625e-06 Z" stroke="none" fill="#3fa7ce"/>
</g>
<path id="Path_94" data-name="Path 94" d="M0,0S12.538,4.734,23.6,4.734A52.3,52.3,0,0,0,44.245,0" transform="translate(0.355 11.893)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_201" data-name="Line 201" x1="4.702" y1="14.752" transform="translate(26.924 0.693)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_202" data-name="Line 202" x1="4.759" y2="14.752" transform="translate(12.503 0.693)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<path id="Path_93" data-name="Path 93" d="M0,4.009S-2.153-10.205,7.212-10.538,14.377,4.009,14.377,4.009" transform="translate(16.048 40.303)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_203" data-name="Line 203" x1="12.209" transform="translate(16.696 21.329)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-width="1"/>
<line id="Line_204" data-name="Line 204" x1="12.209" transform="translate(16.696 25.742)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-width="1"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="45.6" height="45.6" viewBox="0 0 45.6 45.6">
<g id="Path_95" data-name="Path 95" fill="#fff">
<path d="M 33.83258438110352 44.8504524230957 L 11.76785469055176 44.8504524230957 C 8.824884414672852 44.8504524230957 6.058054447174072 43.70439529418945 3.977064371109009 41.62339401245117 C 1.896064281463623 39.54239273071289 0.7500042915344238 36.77556610107422 0.7500042915344238 33.83258438110352 L 0.7500042915344238 8.825894355773926 C 0.7500042915344238 4.372834205627441 4.372834205627441 0.7500042915344238 8.825894355773926 0.7500042915344238 L 36.77455520629883 0.7500042915344238 C 41.24808502197266 0.7500042915344238 44.8504524230957 6.086584091186523 44.8504524230957 10.50503444671631 L 44.8504524230957 33.83258438110352 C 44.8504524230957 36.77556610107422 43.70439529418945 39.54239273071289 41.62339401245117 41.62339401245117 C 39.54239273071289 43.70439529418945 36.77556610107422 44.8504524230957 33.83258438110352 44.8504524230957 Z" stroke="none"/>
<path d="M 8.825893402099609 1.499996185302734 C 4.786384582519531 1.499996185302734 1.499996185302734 4.786384582519531 1.499996185302734 8.825893402099609 L 1.499996185302734 33.83258438110352 C 1.499996185302734 39.49430465698242 6.106132507324219 44.10044479370117 11.76785278320312 44.10044479370117 L 33.83258438110352 44.10044479370117 C 39.49430465698242 44.10044479370117 44.10044479370117 39.49430465698242 44.10044479370117 33.83258438110352 L 44.10044479370117 10.50503540039062 C 44.10044479370117 8.442455291748047 43.25521469116211 6.143684387207031 41.83945465087891 4.355815887451172 C 40.994873046875 3.289253234863281 39.21379470825195 1.499996185302734 36.77455520629883 1.499996185302734 L 8.825893402099609 1.499996185302734 M 8.825893402099609 -3.814697265625e-06 L 36.77455520629883 -3.814697265625e-06 C 41.64896392822266 -3.814697265625e-06 45.60044479370117 5.630622863769531 45.60044479370117 10.50503540039062 L 45.60044479370117 33.83258438110352 C 45.60044479370117 40.33179473876953 40.33179473876953 45.60044479370117 33.83258438110352 45.60044479370117 L 11.76785278320312 45.60044479370117 C 5.268653869628906 45.60044479370117 -3.814697265625e-06 40.33179473876953 -3.814697265625e-06 33.83258438110352 L -3.814697265625e-06 8.825893402099609 C -3.814697265625e-06 3.951484680175781 3.951484680175781 -3.814697265625e-06 8.825893402099609 -3.814697265625e-06 Z" stroke="none" fill="#3fa7ce"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1,120 @@
import React from "react";
import arrow from "./arrow-icon.svg";
import delivery from "./delivery-icon.svg";
import checked from "./icon1.svg";
import circle from "./info-circle.svg";
import shield from "./shield-tick.svg";
import tick from "./tick-circle.svg";
import shop from "./icon-shop.svg";
const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
console.log(items.alertIcon);
return (
<section className="bg-white m-10 w-full sm:w-8/12 md:w-5/12 lg:w-3/12 p-5">
<div className="bg-gray-200 rounded px-4 py-2">
{items.map((item, index) => (
<div>
<div
className="flex flex-row items-center justify-between mt-3 mb-3"
key={index}
>
<div className="flex flex-row items-center">
<img src={item.icon} alt="" className="w-8" />
<div className="flex flex-col mr-3">
<p className="text-sm">
<span className="font-bold">{item.subtitle}</span>
{item.title}
</p>
{item.customerSatisfaction && (
<p className="text-xs mt-1">
رضایت خریداران:
<span className="font-bold text-green-500 mr-2">
{item.customerSatisfactionPercent}
</span>
</p>
)}
</div>
</div>
{item.alertIcon && <img src={circle} alt="" className="w-5" />}
</div>
<div className="border-b border-gray-300"></div>
</div>
))}
<div className="flex flex-col items-center">
<p className="text-lg text-blue-600 mt-5 mb-2">
{productPrice}
<span className="text-sm text-gray-700 font-light">تومان</span>
</p>
<p className="text-xs font-light text-gray-600">
با خرید این کالا
<span>{discountPrice}</span>
صرفه جویی کنید
</p>
</div>
<div className="w-full flex flex-col items-center">
<button className="w-6/12 mt-5 mb-2 rounded bg-blue-400 text-white p-2 text-sm hover:bg-blue-600 transtition ease-linear duration-300">
افزودن به سبد خرید
</button>
</div>
</div>
<div className="bg-gray-200 rounded px-4 py-2 mt-2 flex flex-row items-center">
<div>
<img src={arrow} alt="" className="w-20 h-20" />
</div>
<div className="flex flex-col mr-5">
<h2 className="text-sm font-bold text-blue-900">
بازگشت بی چون و چرا
</h2>
<p className="text-xs mt-2 leading-5 text-justify">
از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی
خوشتون نیومده میتونید بی قید و شرط پس بدید
</p>
</div>
</div>
</section>
);
};
export default ProductStatusCard;
ProductStatusCard.defaultProps = {
items: [
{
icon: tick,
title: "توصیه به خرید توسط 4420 نفر",
subtitle: null,
alertIcon: false,
customerSatisfaction: false,
customerSatisfactionPercent: null,
},
{
icon: shop,
title: " آپادانا ",
subtitle: " فروشنده",
alertIcon: true,
customerSatisfaction: true,
customerSatisfactionPercent: " 91.5 ",
},
{
icon: delivery,
title: " 20 روز کاری پس از سفارش ",
subtitle: "زمان ارسال",
alertIcon: false,
customerSatisfaction: false,
customerSatisfactionPercent: null,
},
{
icon: shield,
title: "اصالت و سلامت فیزیکی",
subtitle: "گارانتی ",
alertIcon: true,
customerSatisfaction: false,
customerSatisfactionPercent: null,
},
],
productPrice: " 56/894/000 ",
discountPrice: " 540.000 ",
};

@ -0,0 +1,6 @@
<svg id="info-circle" xmlns="http://www.w3.org/2000/svg" width="31.269" height="31.269" viewBox="0 0 31.269 31.269">
<path id="Vector" d="M13.029,26.057A13.029,13.029,0,1,0,0,13.029,13.067,13.067,0,0,0,13.029,26.057Z" transform="translate(2.606 2.606)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0V6.514" transform="translate(15.634 10.423)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H.012" transform="translate(15.627 20.846)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H31.269V31.269H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 829 B

@ -0,0 +1,5 @@
<svg id="shield-tick" xmlns="http://www.w3.org/2000/svg" width="52.115" height="52.115" viewBox="0 0 52.115 52.115">
<path id="Vector" d="M15.374.5,4.538,4.587A7.535,7.535,0,0,0,0,11.123V27.257a10.557,10.557,0,0,0,3.757,7.47l9.337,6.97a9.883,9.883,0,0,0,11.161,0l9.337-6.97a10.557,10.557,0,0,0,3.757-7.47V11.123a7.54,7.54,0,0,0-4.538-6.558L21.975.5A11.041,11.041,0,0,0,15.374.5Z" transform="translate(7.405 4.337)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,5.841l3.5,3.5L12.833,0" transform="translate(19.652 19.934)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H52.115V52.115H0Z" transform="translate(52.115 52.115) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 864 B

@ -0,0 +1,5 @@
<svg id="tick-circle" xmlns="http://www.w3.org/2000/svg" width="55.143" height="55.143" viewBox="0 0 55.143 55.143">
<path id="Vector" d="M22.976,45.952A22.976,22.976,0,1,0,0,22.976,23.044,23.044,0,0,0,22.976,45.952Z" transform="translate(4.595 4.595)" fill="#42e337" stroke="#9eff97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,6.5,6.5,13,19.53,0" transform="translate(17.807 21.069)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H55.143V55.143H0Z" fill="#afe7ab" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 652 B

@ -3,7 +3,7 @@ import React, { useState } from "react";
import productImg from "./product-chair.svg";
import plus from "./plus.svg";
const ProductSuggestion = ({ suggestions }) => {
const ProductSuggestion = ({ suggestions, selected }) => {
const [selectedProduct, setSelectedProduct] = useState(null);
return (
@ -14,10 +14,10 @@ const ProductSuggestion = ({ suggestions }) => {
{/* product design */}
<div className="flex flex-row flex-wrap justify-center items-center mt-20">
{suggestions.map((suggestion, index) => (
<div className="flex flex-row mb-7" key={index}>
<div className="flex flex-col sm:flex-row mb-7" key={index}>
<img src={suggestion.plusIcon} alt="" className="mx-4" />
<div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
${selectedProduct === suggestion ? "bg-white" : ""}`}
onClick={() => setSelectedProduct(suggestion)}
>
@ -33,10 +33,18 @@ const ProductSuggestion = ({ suggestions }) => {
{suggestion.productPrice}
<span className="mr-1 text-xs text-black">تومان</span>
</p>
<div className="flex flex-col items-center mt-3">
<div className="flex flex-col items-center">
{/* {suggestion.selected && (
<span className="text-xs">انتخاب شما</span>
)} */}
{selectedProduct === suggestion && (
<span className="text-xs mt-2">انتخاب شما</span>
)}
<input
className="checkbox-input-checked mt-4 cursor-pointer w-4 h-4"
// checked={suggestion.selected}
checked={selectedProduct === suggestion ? true : false}
onClick={() => setSelectedProduct(suggestion)}
className="checkbox-input mt-4 cursor-pointer w-4 h-4"
type="checkbox"
/>
</div>
@ -47,16 +55,16 @@ const ProductSuggestion = ({ suggestions }) => {
{/* bottom */}
<div className="flex flex-col justify-center items-center mt-10">
<div className="flex flex-row mb-5">
<p className="text-base text-productPrice font-bold">
<p className="text-sm sm:text-base text-productPrice font-bold">
جمع لوازم اختیاری خریداری شده
<span> 56/894/400 </span>
تومان
</p>
<span className="text-lightBlueTextColor text-base mr-1 font-bold">
<span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-bold">
1 کالا
</span>
</div>
<p className="text-sm font-light mb-2 text-gray-600">
<p className="text-xs sm:text-sm font-light mb-2 text-gray-600">
در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
</p>
<button className="my-2 text-white rounded bg-blueBgColor p-2 text-sm">
@ -76,24 +84,146 @@ ProductSuggestion.defaultProps = {
productTitle: "لپ تاپ گیمینگ ایسوس",
productPrice: "750000",
plusIcon: null,
// selected: true,
},
{
productImage: productImg,
productTitle: "مانیتور 40 اینچ",
productPrice: "3.000.000",
plusIcon: plus,
// selected: true,
},
{
productImage: productImg,
productTitle: "ماوس گیمینگ",
productPrice: "650/000",
plusIcon: plus,
// selected: false,
},
{
productImage: productImg,
productTitle: "لپ تاپ مک بوک پرو 2022",
productPrice: "2000",
plusIcon: plus,
// selected: false,
},
],
};
//
//
// import React, { useState } from "react";
// import productImg from "./product-chair.svg";
// import plus from "./plus.svg";
// const ProductSuggestion = ({ suggestions, selected }) => {
// const [selectedProduct, setSelectedProduct] = useState([]);
// const addToSelected = (obj) => {
// if (selectedProduct.indexOf(obj) === -1) {
// setSelectedProduct(() => [...selectedProduct, obj]);
// } else {
// setSelectedProduct(() =>
// selectedProduct.splice(selectedProduct.indexOf(obj), 1)
// );
// }
// };
// return (
// <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
// <h2 className="text-center text-lg font-bold text-productPrice">
// این کالاها برای خرید به شما پیشنهام می دهیم
// </h2>
// {/* product design */}
// <div className="flex flex-row flex-wrap justify-center items-center mt-20">
// {suggestions.map((suggestion, index) => (
// <div
// className="flex flex-col sm:flex-row mb-7"
// key={index}
// onClick={() => setSelectedProduct(suggestion)}
// >
// <img src={suggestion.plusIcon} alt="" className="mx-4" />
// <div
// className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
// ${selectedProduct === suggestion ? "bg-white" : ""}`}
// >
// <img
// src={suggestion.productImage}
// alt=""
// className="w-full h-full"
// />
// <h2 className="my-3 text-sm text-productPrice">
// {suggestion.productTitle}
// </h2>
// <p className="text-sm text-lightBlueTextColor">
// {suggestion.productPrice}
// <span className="mr-1 text-xs text-black">تومان</span>
// </p>
// <div className="flex flex-col items-center mt-3">
// {suggestion.selected && (
// <span className="text-xs">انتخاب شما</span>
// )}
// <input
// checked={selectedProduct.indexOf(suggestion) > -1}
// onClick={() => setSelectedProduct(suggestion)}
// className="checkbox-input mt-4 cursor-pointer w-4 h-4"
// type="checkbox"
// />
// </div>
// </div>
// </div>
// ))}
// </div>
// {/* bottom */}
// <div className="flex flex-col justify-center items-center mt-10">
// <div className="flex flex-row mb-5">
// <p className="text-sm sm:text-base text-productPrice font-bold">
// جمع لوازم اختیاری خریداری شده
// <span> 56/894/400 </span>
// تومان
// </p>
// <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-bold">
// 1 کالا
// </span>
// </div>
// <p className="text-xs sm:text-sm font-light mb-2 text-gray-600">
// در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
// </p>
// <button className="my-2 text-white rounded bg-blueBgColor p-2 text-sm">
// اضافه کردن 1 مورد به سبد خرید
// </button>
// </div>
// </section>
// );
// };
// export default ProductSuggestion;
// ProductSuggestion.defaultProps = {
// suggestions: [
// {
// productImage: productImg,
// productTitle: "لپ تاپ گیمینگ ایسوس",
// productPrice: "750000",
// plusIcon: null,
// },
// {
// productImage: productImg,
// productTitle: "مانیتور 40 اینچ",
// productPrice: "3.000.000",
// plusIcon: plus,
// },
// {
// productImage: productImg,
// productTitle: "ماوس گیمینگ",
// productPrice: "650/000",
// plusIcon: plus,
// },
// {
// productImage: productImg,
// productTitle: "لپ تاپ مک بوک پرو 2022",
// productPrice: "2000",
// plusIcon: plus,
// },
// ],
// };

@ -0,0 +1,51 @@
import React, { useState } from "react";
import Table from "./table";
const ProductTab = ({ tabs }) => {
const [selectedTab, setSelectedTab] = useState(null);
return (
<section className="m-10">
<div className="rounded bg-white">
<ul className="flex flex-row">
{tabs.map((tab, index) => (
<li
className={`text-sm m-4 cursor-pointer hover:text-blue-400 ${
selectedTab === tab ? "text-blue-600" : ""
}`}
onClick={() => setSelectedTab(tab)}
key={index}
>
{tab.title}
</li>
))}
</ul>
</div>
<div className={`rounded w-full flex items-center ${selectedTab?.bg}`}>
{selectedTab?.components}
</div>
</section>
);
};
export default ProductTab;
ProductTab.defaultProps = {
tabs: [
{
title: "مشخصات",
components: <Table />,
bg: "bg-transparent",
},
{
title: "پرسش",
components: "نقد و بررسی",
bg: "bg-blue-500",
},
{
title: "سوال",
components: "پرسش و پاسخ",
bg: "bg-yellow-500",
},
],
};

@ -0,0 +1,47 @@
import React from "react";
const persian = {
weight: "وزن",
pageNumber: "تعداد صفحات",
pageType: "نوع کاغذ",
bookNumber: "شماره شابک",
publisher: "انتشارات",
author: "نویسنده",
bookType: "قطع",
publishedYear: "سال انتشار",
};
const Table = ({ specifications }) => {
return (
<ul className="w-full">
{Object.keys(specifications).map((specification, index) => (
<li className="flex my-3">
<div
className="bg-white rounded p-3 ml-2 text-blue-600 text-sm"
style={{ flex: 2 }}
>
{persian[specification]}
</div>
<div className="bg-white rounded p-3 text-sm" style={{ flex: 8 }}>
{specifications[specification]}
</div>
</li>
))}
</ul>
);
};
export default Table;
Table.defaultProps = {
specifications: {
weight: "1 کیلوگرم",
pageNumber: "400 صفحه",
pageType: "گلاسه",
bookNumber: "124900985340561870112312499",
publisher: "رزمندگان",
author: "یک نویسنده گمنام",
bookType: "خشتی",
publishedYear: "1399",
},
};

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.774" height="16.04" viewBox="0 0 17.774 16.04">
<path id="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(0.65 0.65)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</svg>

After

Width:  |  Height:  |  Size: 499 B

@ -0,0 +1,4 @@
<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="#2d57cb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 434 B

@ -0,0 +1,7 @@
<svg id="element-4" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M7.37,7.717v-5.9C7.37.52,6.815,0,5.436,0h-3.5C.555,0,0,.52,0,1.821v5.9c0,1.3.555,1.821,1.934,1.821h3.5C6.815,9.538,7.37,9.017,7.37,7.717Z" transform="translate(11.705 1.734)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M7.37,3.382V1.821C7.37.52,6.815,0,5.436,0h-3.5C.555,0,0,.52,0,1.821V3.382C0,4.682.555,5.2,1.934,5.2h3.5C6.815,5.2,7.37,4.682,7.37,3.382Z" transform="translate(11.705 13.873)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M7.37,1.821v5.9c0,1.3-.555,1.821-1.934,1.821h-3.5C.555,9.538,0,9.017,0,7.717v-5.9C0,.52.555,0,1.934,0h3.5C6.815,0,7.37.52,7.37,1.821Z" transform="translate(1.734 9.538)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M7.37,1.821V3.382c0,1.3-.555,1.821-1.934,1.821h-3.5C.555,5.2,0,4.682,0,3.382V1.821C0,.52.555,0,1.934,0h3.5C6.815,0,7.37.52,7.37,1.821Z" transform="translate(1.734 1.734)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H20.809V20.809H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,6 @@
<svg id="folder-open" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M16.781,2.861,16.434,7.2c-.13,1.327-.234,2.341-2.584,2.341H2.943C.593,9.538.489,8.523.359,7.2L.012,2.861A2.628,2.628,0,0,1,.576.962L.593.945A2.579,2.579,0,0,1,2.6,0H14.2a2.57,2.57,0,0,1,1.986.928c.009.009.017.017.017.026A2.536,2.536,0,0,1,16.781,2.861Z" transform="translate(2.008 9.538)" fill="none" stroke="#247deb" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M0,8.15V3.685C0,.737.737,0,3.685,0h1.1A1.749,1.749,0,0,1,6.555.884l1.1,1.474a1.172,1.172,0,0,0,1.179.59h2.211c2.948,0,3.685.737,3.685,3.685V8.185" transform="translate(3.035 1.76)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H4.457" transform="translate(8.176 14.74)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,159 @@
import React from "react";
import "./index.scss";
import downwardArrow from "./arrow-down.svg";
import profilePic from "./profile-pic.svg";
import element from "./element-4.svg";
import folderOpen from "./folder-open.svg";
import wallet from "./wallet-money.svg";
import logout from "./logout.svg";
import messageText from "./message-text.svg";
import moon from "./moon.svg";
import sms from "./sms.svg";
import userEdit from "./user-edit.svg";
import Switch from "../Switch";
const SidebarMenu = ({ items, buttons }) => {
return (
<section>
<div
style={{ width: "20%" }}
className="bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar"
>
{/* profile */}
<div className="flex flex-row items-center">
<img src={profilePic} alt="" className="w-12 rounded-full" />
<p className="text-blue-600 font-bold text-base flex-1 mx-2">
کامران کوهستانی شیرازی
</p>
<img src={downwardArrow} alt="" className="w-5" />
</div>
{/* divider */}
<div className="border border-gray-200 mt-5"></div>
<p className="text-xs text-gray-400 my-4">منوی کاربری</p>
{/* items */}
{items.map((item, i) => (
<div className="flex flex-col item-center">
{/* menu items */}
<div
key={i}
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
>
<img src={item.icon} alt="" />
<p className="text-blue-600 text-sm flex-1 mx-2">{item.title}</p>
{item.notification && (
<div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center">
<span className=" text-white text-xs">
{item.notification}
</span>
</div>
)}
</div>
{/* sub items */}
{item.subItems.map((subItem, i) => (
<div
key={i}
className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2"
>
{subItem.name && (
<p className="text-gray-400 text-xs flex-1 mr-4">
{subItem.name}
</p>
)}
{subItem.num && (
<div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center">
<span className=" text-white text-xs">{subItem.num}</span>
</div>
)}
</div>
))}
</div>
))}
{/* buttons */}
{buttons.map((button, i) => (
<div className="flex flex-col item-center">
{/* divider */}
<div className="border border-gray-200 my-1"></div>
<div
key={i}
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
>
<img src={button.icon} alt="" />
<p className="text-blue-600 text-sm flex-1 mx-2">
{button.title}
</p>
{button.leftIcon && <Switch />}
</div>
</div>
))}
</div>
</section>
);
};
export default SidebarMenu;
SidebarMenu.defaultProps = {
items: [
{
icon: element,
title: "داشبورد مدیریت",
notification: null,
subItems: [],
},
{
icon: folderOpen,
title: "پروژه ها",
notification: null,
subItems: [
{ name: "افزدون پروژه", num: null },
{ name: "مدیریت پروژه ها", num: null },
{ name: "پروژه های حذف شده", num: null },
],
},
{
icon: wallet,
title: "مالی و حسابداری",
notification: null,
subItems: [
{ name: "تمدید سرویس", num: null },
{ name: "بسته های اشتراکی", num: null },
{ name: "فاکتور ها", num: 1 },
{ name: "درخواست تسویه حساب", num: null },
],
},
{
icon: userEdit,
title: "دیدگاه ها",
notification: null,
subItems: [],
},
{
icon: userEdit,
title: "حساب کاربری",
notification: null,
subItems: [{ name: "ویرایش حساب کاربری", num: null }],
},
{
icon: sms,
title: "پشتیبانی",
notification: 7,
subItems: [
{ name: "تیکت ها", num: null },
{ name: "ارسال تیکت جدید", num: null },
{ name: "ویکی", num: null },
],
},
{
icon: messageText,
title: "متستندات",
notification: null,
subItems: [{ name: "API توسعه دهندگان", num: null }],
},
],
buttons: [
{ icon: moon, title: "حالت شب", leftIcon: moon },
{ icon: logout, title: "خروج از حساب کاربری", leftIcon: null },
],
};

@ -0,0 +1,9 @@
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

@ -0,0 +1,6 @@
<svg id="logout" xmlns="http://www.w3.org/2000/svg" width="24.545" height="24.545" viewBox="0 0 24.545 24.545">
<path id="Vector" d="M0,5.185C.317,1.5,2.209,0,6.351,0h.133c4.571,0,6.4,1.831,6.4,6.4V13.07c0,4.571-1.831,6.4-6.4,6.4H6.351c-4.111,0-6-1.483-6.341-5.1" transform="translate(9.102 2.547)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M11.638,0H0" transform="translate(3.702 12.272)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M3.426,0,0,3.426,3.426,6.852" transform="translate(2.557 8.846)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24.545V24.545H0Z" transform="translate(24.545 24.545) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 943 B

@ -0,0 +1,8 @@
<svg id="message-text" xmlns="http://www.w3.org/2000/svg" width="22" height="23.237" viewBox="0 0 22 23.237">
<path id="Vector" d="M5.438,0h7.251q5.438,0,5.438,5.809V18.4a.942.942,0,0,1-.906.968H5.438Q0,19.364,0,13.555V5.809Q0,0,5.438,0Z" transform="translate(1.936 1.936)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<g id="Group" transform="translate(6.159 9.198)">
<path id="Vector-2" data-name="Vector" d="M9.682,0H0" fill="#fff" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M6.777,0H0" transform="translate(2.905 4.841)" fill="#fff" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</g>
<path id="Vector-4" data-name="Vector" d="M22,0H0V23.237H22Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 874 B

@ -0,0 +1,4 @@
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
<path id="Vector" d="M.025,9.556a9.631,9.631,0,0,0,17.352,4.858c.752-1.017.348-1.7-.907-1.467a8.7,8.7,0,0,1-1.907.128A8.547,8.547,0,0,1,6.4,4.716,8.154,8.154,0,0,1,7.083,1.37c.5-1.137-.1-1.677-1.247-1.192A9.442,9.442,0,0,0,.025,9.556Z" transform="translate(1.836 1.829)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H22V22H0Z" transform="translate(22 22) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 597 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 48 KiB

@ -0,0 +1,5 @@
<svg id="sms" xmlns="http://www.w3.org/2000/svg" width="21.904" height="21.904" viewBox="0 0 21.904 21.904">
<path id="Vector" d="M13.69,15.516H4.563C1.825,15.516,0,14.147,0,10.952V4.563C0,1.369,1.825,0,4.563,0H13.69c2.738,0,4.563,1.369,4.563,4.563v6.389C18.254,14.147,16.428,15.516,13.69,15.516Z" transform="translate(1.825 3.194)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M9.127,0,6.27,2.282a2.889,2.889,0,0,1-3.423,0L0,0" transform="translate(6.389 8.214)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H21.9V21.9H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 755 B

@ -0,0 +1,9 @@
<svg id="user-edit" xmlns="http://www.w3.org/2000/svg" width="20.478" height="20.478" viewBox="0 0 20.478 20.478">
<path id="Vector" d="M8.533,4.266A4.266,4.266,0,1,1,4.266,0,4.266,4.266,0,0,1,8.533,4.266Z" transform="translate(5.973 1.707)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<g id="Group" transform="translate(12.945 12.941)">
<path id="Vector-2" data-name="Vector" d="M3.446.489.426,3.509a1.051,1.051,0,0,0-.256.5L.008,5.165a.542.542,0,0,0,.648.648l1.152-.162a1.015,1.015,0,0,0,.5-.256L5.332,2.375a1.165,1.165,0,0,0,0-1.894A1.161,1.161,0,0,0,3.446.489Z" transform="translate(0 0)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0A2.718,2.718,0,0,0,1.894,1.894" transform="translate(3.011 0.924)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</g>
<path id="Vector-4" data-name="Vector" d="M0,5.973C0,2.671,3.285,0,7.329,0A8.79,8.79,0,0,1,9.864.367" transform="translate(2.91 12.799)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H20.478V20.478H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,8 @@
<svg id="wallet-money" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M6.2,0V1.76a2.916,2.916,0,0,1-3.1,2.7A2.924,2.924,0,0,1,0,1.76V0C0,1.491,1.387,2.549,3.1,2.549S6.2,1.483,6.2,0Z" transform="translate(3.123 14.619)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M6.208,2.688a2.275,2.275,0,0,1-.329,1.179A3.186,3.186,0,0,1,3.1,5.237,3.206,3.206,0,0,1,.329,3.867,2.274,2.274,0,0,1,0,2.688,2.518,2.518,0,0,1,.9.789,3.309,3.309,0,0,1,3.1,0,3.355,3.355,0,0,1,5.289.789,2.465,2.465,0,0,1,6.208,2.688Z" transform="translate(3.113 9.546)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M6.2,2.7V5.081C6.2,6.572,4.812,7.63,3.1,7.63S0,6.564,0,5.081V2.7A2.919,2.919,0,0,1,3.1,0,3.355,3.355,0,0,1,5.3.789,2.536,2.536,0,0,1,6.2,2.7Z" transform="translate(3.123 9.538)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M4.447.884V2.671a.89.89,0,0,1-.867.884h-1.7A1.849,1.849,0,0,1,.008,1.934,1.741,1.741,0,0,1,.528.52,1.728,1.728,0,0,1,1.777,0h1.8A.89.89,0,0,1,4.447.884Z" transform="translate(14.628 8.627)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(1.734 3.035)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-6" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -0,0 +1,13 @@
import React from "react";
import "./index.scss";
const Switch = () => {
return (
<div className="switch">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
</div>
);
};
export default Switch;

@ -0,0 +1,52 @@
// *, *:after, *:before {
// // box-sizing: border-box;
// }
// body {
// min-height: 100vh;
// display: flex;
// align-items: center;
// justify-content: center;
// }
.switch {
position: relative;
input[type="checkbox"] {
visibility: hidden;
position : absolute;
&:checked + label {
transform: rotate(0deg);
background-color: #000;
&:before {
transform: translateX(35.5px);
background-color: #fff;
}
}
}
label {
display: flex;
width: 70px;
height: 34px;
border: 3px solid;
border-radius: 99em;
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: 50% 50%;
cursor: pointer;
&:before {
transition: transform 0.3s ease;
transition-delay: 0s;
content: "";
display: block;
position: absolute;
width: 24px;
height: 24px;
background-color: #000;
border-radius: 50%;
top: 2px;
left: 3px;
}
}
}

@ -0,0 +1,323 @@
import React, { useEffect, useState } from "react";
import StarRating from "../starRating/StarRating";
import ReactTooltip from "react-tooltip";
import watermelon from "../../assets/images/watermelon.png";
import video from "./danovin.mp4";
import discountImg from "../../assets/icons/discount.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg";
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
import RedDotIcon from "../../assets/icons/redDotIcon.svg";
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg";
const VodProduct = ({
productColor,
colors,
likeBtn,
discount,
discountPricePercent,
discountPrice,
productContent,
star,
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productCat,
rangeHolder,
priceTitle,
addToCartHolder,
productTitleCategoryHolder,
productTitleCategoryHolderAlignment,
priceStarHolder,
priceStarAlignment,
rangeWidth,
}) => {
const [progressFlag, setProgressFlag] = useState(false);
const [openModal, setOpenModal] = useState(false);
// const [closeModal, setCloseModal] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 1000);
});
return (
<section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
{/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4">
<div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
>
{/* product image */}
<div
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
style={{
backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
minHeight: "180px",
}}
onClick={() => setOpenModal(true)}
>
{/* icons on image */}
<div className="absolute left-2 top-2">
{discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={heart} alt="" className="w-5" />
</div>
)}
{discount && (
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
</div>
{/* play button */}
<div
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
onClick={() => setOpenModal(true)}
>
<img
src={whitePlayIcon}
alt=""
className=" w-5 h-5"
onClick={() => setOpenModal(true)}
/>
</div>
{/* select Color */}
{productColor && (
<div className="flex items-center absolute right-2 bottom-2">
{/* {colors.map((color,index))} */}
<img
src={YellowDotIcon}
alt=""
data-tip="زرد"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)}
</div>
{/* product content */}
<div className="px-2">
{/* content */}
<div className="mt-4 flex flex-col">
<div
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
>
<h2
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productCat && (
<span
className={`text-xs font-light text-darkCrimsonTextColor`}
>
پایه سوم
</span>
)}
</div>
{productContent && (
<p
className={`text-justify text-sm leading-6 text-productContent`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد.
</p>
)}
</div>
{/* price */}
<div
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`}
>
{priceHolder && (
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="">
<div
className={`${
priceDirection.indexOf("col") !== -1
? "inline"
: "flex"
}`}
>
{priceTitle && (
<span className="text-xs text-borderColor ml-2">
قیمت
</span>
)}
{discountPrice && (
<p className="line-through text-xs text-borderColor">
<span> قیمت</span> 140<span>تومان</span>
</p>
)}
</div>
<p
className={`text-sm font-semibold inline text-productPrice`}
>
111.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
{addToCartHolder && (
<button
className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
)}
</div>
)}
{star && (
<div className="flex items-center">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
</div>
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
ارسال رایگان
</button>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
برچسب های دیگر
</button>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
دسته بندی به صورت کادو
</button>
</div>
)}
{rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div
className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{
width: progressFlag ? rangeWidth : 0,
}}
></div>
</div>
)}
</div>
</div>
</div>
</div>
<div
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
${openModal ? "opacity-80" : "opacity-10 pointer-events-none"}
`}
onClick={() => setOpenModal(false)}
>
<video
controls
className={`border transition-all duration-1000
${openModal ? "opacity-100" : "opacity-0 pointer-events-none"}
`}
src={video}
type="video/mp4"
onClick={(e) => e.stopPropagation()}
></video>
</div>
</section>
);
};
// hover:-translate-y-2
export default VodProduct;
// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle
// text color i used for product excerpt:
// text-productContent
// text color i used for product cat:
// text-darkCrimsonTextColor
// bg color i used for play button icon:
// bg-playButtonIcon
// bg-playButtonIcon2
VodProduct.defaultProps = {
colors: [
{
icon: YellowDotIcon,
dataType: "زرد",
},
{
icon: RedDotIcon,
dataType: "قرمز",
},
{
icon: PurpleDotIcon,
dataType: "بنفش",
},
{
icon: LightBlueDotIcon,
dataType: "آبی",
},
LightBlueDotIcon,
],
// icons on product image
productColor: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
// product price
discountPrice: true,
priceHolder: true,
priceTitle: false,
productContent: false,
star: true,
productTags: false,
productCat: true,
rangeHolder: true,
addToCartHolder: false,
productTitleAlignment: "text-justify",
// برای درصد دادن به عرض رنج
rangeWidth: "75%",
priceDirection: "flex-row",
productTitleCategoryHolder: "flex-row",
productTitleCategoryHolderAlignment: "items-center",
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
// یادمون باشه که حتما رویه
// flex-col-reverse
// بزاریم
// دیفالتش باید این باشه:
// priceStarHolder: flex-row
priceStarHolder: "flex-row",
// دیفالتش باید این باشه:
// priceStarHolder: items-center
priceStarAlignment: "items-center",
};

@ -0,0 +1,344 @@
import React, { useEffect, useState } from "react";
import StarRating from "../starRating/StarRating";
import ReactTooltip from "react-tooltip";
import watermelon from "../../assets/images/watermelon.png";
import video from "./danovin.mp4";
import discountImg from "../../assets/icons/discount.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg";
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
import RedDotIcon from "../../assets/icons/redDotIcon.svg";
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg";
const VodProduct = ({
productColor,
colors,
likeBtn,
discount,
discountPricePercent,
discountPrice,
productContent,
star,
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productCat,
rangeHolder,
priceTitle,
addToCartHolder,
productTitleCategoryHolder,
productTitleCategoryHolderAlignment,
priceStarHolder,
priceStarAlignment,
rangeWidth,
}) => {
const [progressFlag, setProgressFlag] = useState(false);
// const [openModal, setOpenModal] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 1000);
});
return (
<section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
رویه باتن پلی / عکس کلیک کنید
{/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4">
<div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
>
{/* product image */}
<div
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
style={{
backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
minHeight: "180px",
}}
data-modal-toggle="large-modal"
>
{/* icons on image */}
<div className="absolute left-2 top-2">
{discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={heart} alt="" className="w-5" />
</div>
)}
{discount && (
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
</div>
{/* play button */}
<div
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
// onClick={() => setOpenModal(true)}
>
<img
src={whitePlayIcon}
alt=""
className="w-5 h-5"
// onClick={() => setOpenModal(true)}
/>
</div>
{/* select Color */}
{productColor && (
<div className="flex items-center absolute right-2 bottom-2">
{/* {colors.map((color,index))} */}
<img
src={YellowDotIcon}
alt=""
data-tip="زرد"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)}
</div>
{/* product content */}
<div className="px-2">
{/* content */}
<div className="mt-4 flex flex-col">
<div
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
>
<h2
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productCat && (
<span
className={`text-xs font-light text-darkCrimsonTextColor`}
>
پایه سوم
</span>
)}
</div>
{productContent && (
<p
className={`text-justify text-sm leading-6 text-productContent`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد.
</p>
)}
</div>
{/* price */}
<div
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`}
>
{priceHolder && (
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="">
<div
className={`${
priceDirection.indexOf("col") !== -1
? "inline"
: "flex"
}`}
>
{priceTitle && (
<span className="text-xs text-borderColor ml-2">
قیمت
</span>
)}
{discountPrice && (
<p className="line-through text-xs text-borderColor">
<span> قیمت</span> 140<span>تومان</span>
</p>
)}
</div>
<p
className={`text-sm font-semibold inline text-productPrice`}
>
111.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
{addToCartHolder && (
<button
className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
)}
</div>
)}
{star && (
<div className="flex items-center">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
</div>
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
ارسال رایگان
</button>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
برچسب های دیگر
</button>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
دسته بندی به صورت کادو
</button>
</div>
)}
{rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div
className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{
width: progressFlag ? rangeWidth : 0,
}}
></div>
</div>
)}
</div>
</div>
</div>
</div>
<div
class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
id="large-modal"
>
<div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600">
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="large-modal"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div class="p-6 space-y-6">
<video
controls
className={`border transition-all duration-1000
`}
src={video}
type="video/mp4"
></video>
</div>
</div>
</div>
</div>
</section>
);
};
// hover:-translate-y-2
export default VodProduct;
// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle
// text color i used for product excerpt:
// text-productContent
// text color i used for product cat:
// text-darkCrimsonTextColor
// bg color i used for play button icon:
// bg-playButtonIcon
// bg-playButtonIcon2
VodProduct.defaultProps = {
colors: [
{
icon: YellowDotIcon,
dataType: "زرد",
},
{
icon: RedDotIcon,
dataType: "قرمز",
},
{
icon: PurpleDotIcon,
dataType: "بنفش",
},
{
icon: LightBlueDotIcon,
dataType: "آبی",
},
LightBlueDotIcon,
],
// icons on product image
productColor: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
// product price
discountPrice: true,
priceHolder: true,
priceTitle: false,
productContent: false,
star: true,
productTags: false,
productCat: true,
rangeHolder: true,
addToCartHolder: false,
productTitleAlignment: "text-justify",
// برای درصد دادن به عرض رنج
rangeWidth: "75%",
priceDirection: "flex-row",
productTitleCategoryHolder: "flex-row",
productTitleCategoryHolderAlignment: "items-center",
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
// یادمون باشه که حتما رویه
// flex-col-reverse
// بزاریم
// دیفالتش باید این باشه:
// priceStarHolder: flex-row
priceStarHolder: "flex-row",
// دیفالتش باید این باشه:
// priceStarHolder: items-center
priceStarAlignment: "items-center",
};

@ -36,7 +36,7 @@ const CounterDesign = ({
</div>
{/* counter design */}
<div className="flex flex-col items-center justify-center">
{/* {likeBtn && (
{likeBtn && (
<div className="flex items-center">
<img
src={blackLikeIcon}
@ -51,7 +51,7 @@ const CounterDesign = ({
onClick={() => setCount(count - 1)}
/>
</div>
)} */}
)}
{counterIncreaseBtn && (
<img
src={incrementCounterIcon}

@ -50,7 +50,7 @@ const ProductDesign = ({
}, []);
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
<section className="w-full sm:w-11/12 mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg text-$productTitle">آیتم محصولات</h2>

@ -1,25 +1,56 @@
import React, { useState } from "react";
import blogImage from "../../assets/images/blog-featured-image.jpg";
import React from "react";
import video from "./danovin.mp4";
const Testttt = () => {
const [isHovering, setIsHovering] = useState(false);
return (
<div className="p-20 relative">
<div className="App">
<div class="block space-y-4 md:flex md:space-y-0 md:space-x-4">
<button
class="block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
type="button"
data-modal-toggle="large-modal"
>
Large modal
</button>
</div>
<div
class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
id="large-modal"
>
<div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600">
<button
className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer transition delay-500 ${
isHovering ? "" : "hidden"
}`}
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="large-modal"
>
hover to see me
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
<img
src={blogImage}
alt=""
className="w-96"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
/>
</div>
<div class="p-6 space-y-6">
<video
controls
className={`border transition-all duration-1000
`}
src={video}
type="video/mp4"
></video>
</div>
</div>
</div>
</div>
</div>
);
};

@ -55,7 +55,7 @@ const VodProductDesign = ({
}, 1000);
});
return (
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8">
<section className="w-full sm:w-3/6 mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg text-productTitle">طراحی محصولات vod</h2>
@ -70,7 +70,7 @@ const VodProductDesign = ({
</div>
{/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4">
<div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
>

@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
import "./index.scss";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "@themesberg/flowbite";
ReactDOM.render(
<React.StrictMode>

@ -24,13 +24,13 @@ body {
border-radius: 50%;
}
$errorcolor1: #06bace;
$errorcolor2: #3ee924;
$errorcolor7: #c70000;
$errorcolor7button: #e92424;
$white: #fff;
$black: #000;
$contentcolor: #646464;
$toastbgerror: #ffeaea;
$toastbgsuccess: #c3ffb9;
$toastsuccesscolor: #21ae0b;
// $errorcolor1: #06bace;
// $errorcolor2: #3ee924;
// $errorcolor7: #c70000;
// $errorcolor7button: #e92424;
// $white: #fff;
// $black: #000;
// $contentcolor: #646464;
// $toastbgerror: #ffeaea;
// $toastbgsuccess: #c3ffb9;
// $toastsuccesscolor: #21ae0b;

@ -1,5 +1,8 @@
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./node_modules/@themesberg/flowbite/**/*.js",
],
theme: {
extend: {},
textColor: (theme) => ({
@ -75,5 +78,5 @@ module.exports = {
darkCrimsonBorderColor: "#132F52",
}),
},
plugins: [],
plugins: [require("@themesberg/flowbite/plugin")],
};

Loading…
Cancel
Save