//

package-lock.json

@@ -1788,6 +1788,25 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
+      "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
+      "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
+      "requires": {
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.20"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -2168,6 +2187,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/classnames": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
+      "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw=="
+    },
     "@types/eslint": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
@@ -2204,6 +2228,11 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
       "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
     },
+    "@types/invariant": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
+      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -2269,11 +2298,33 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.0.tgz",
       "integrity": "sha512-O3SQC6+6AySHwrspYn2UvC6tjo6jCTMMmylxZUFhE1CulVu5l3AxU6ca9lrJDTQDVllF62LIxVSx5fuYL6LiZg=="
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/react": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.1.tgz",
+      "integrity": "sha512-w8t9f53B2ei4jeOqf/gxtc2Sswnc3LBK5s0DyJcg5xd10tMHXts2N31cKjWfH9IC/JvEPa/YF1U4YeP1t4R6HQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -2320,6 +2371,11 @@
         }
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/webpack": {
       "version": "4.41.26",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
@@ -3577,6 +3633,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3966,6 +4027,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4685,6 +4751,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+      "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -5014,6 +5085,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6989,6 +7069,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6999,6 +7092,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -7471,6 +7572,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -9580,6 +9689,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
+    "lodash-es": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
+      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -9834,6 +9948,15 @@
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -11965,6 +12088,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -12143,6 +12275,31 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-bootstrap": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.3.tgz",
+      "integrity": "sha512-4tYhk26KRnK0myMEp2wvNjOvnHMwWfa6pWFIiCtj9wewYaTxP7TrCf7MwcIMBgUzyX0SJXx6UbbDG0+hObiXNg==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.21",
+        "@types/classnames": "^2.2.10",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.9.35",
+        "@types/react-transition-group": "^4.4.0",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^5.1.2",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^4.1.0",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.2.tgz",
@@ -12269,11 +12426,77 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
+      "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@popperjs/core": "^2.5.3",
+        "@restart/hooks": "^0.3.25",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.2.tgz",
@@ -12340,6 +12563,17 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -12710,6 +12944,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -14363,6 +14602,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -14545,6 +14794,17 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -14833,6 +15093,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -14882,6 +15147,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "web-vitals": "^1.1.0"
   },

src/App.css

@@ -36,3 +36,5 @@
     transform: rotate(360deg);
   }
 }
+
+

src/App.js

@@ -1,23 +1,14 @@
-import logo from './logo.svg';
+
 import './App.css';
+import { Button } from 'react-bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Header from "./Companents/Header";
+
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div> 
+      <Header />
     </div>
   );
 }

src/Companents/CarouselBox.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import Carousel from 'react-bootstrap/Carousel';
+import onePhoto from '../assets/onephoto.jpg';
+import twoPhoto from '../assets/twophoto.jpg';
+import threePhoto from '../assets/threephoto.jpg';
+export default class CarouselBox extends Component {
+    render() {
+        return (
+            <Carousel >
+                <Carousel.Item>
+                    <img 
+                    className="d-block w-100"
+                    src={ onePhoto }
+                    // height="400"
+                    width="350"
+                    alt="HZ"
+                    />
+                    <Carousel.Caption>
+                        <h3>Finn Wolfhard</h3>
+                        <p>A native of Vancouver, British Columbia, actor Finn Wolfhard."</p>
+                    </Carousel.Caption>
+                </Carousel.Item>
+                <Carousel.Item>
+                    <img 
+                    className="d-block w-100"
+                    src={ twoPhoto }
+                    alt="HZ"
+                    />
+                    <Carousel.Caption>
+                        <h3>Finn Wolfhard</h3>
+                        <p>A native of Vancouver, British Columbia, actor Finn Wolfhard."</p>
+                    </Carousel.Caption>
+                </Carousel.Item>
+                <Carousel.Item>
+                    <img 
+                    className="d-block w-100"
+                    src={ threePhoto }
+                    alt="HZ"
+                    />
+                    <Carousel.Caption>
+                        <h3>Finn Wolfhard</h3>
+                        <p>A native of Vancouver, British Columbia, actor Finn Wolfhard."</p>
+                    </Carousel.Caption>
+                </Carousel.Item>
+            </Carousel>
+        )
+
+    }
+
+}

src/Companents/Header.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import { Container, FormControl, Nav, Navbar, Form, Button } from 'react-bootstrap';
+import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
+import logoPhoto from '../assets/photo_logo.jpg';
+
+import Home from "../Pages/Home"
+import Acc from "../Pages/Acc"
+import Top from "../Pages/Top"
+import New from "../Pages/New"
+import Playlists from "../Pages/Playlists"
+// import Logo from '../Companents/image_2021';
+export default class Header extends Component {
+    render() {
+        return (
+            <>
+            {/*  */}
+                <Navbar collapseOnSelect expand="md" bg="secondary" variant="dark" >
+                    <Container>
+                        <Navbar.Brand href="/">
+                            <img
+                                src={logoPhoto}
+                                height="45"
+                                width="90"
+                                className="d-inline-block alight-top"
+                            // alt="Pelpe"
+                            />
+                        </Navbar.Brand>
+                        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+                        <Navbar.Collapse id="responsive-navbar-nav">
+                            <Nav className="mr-auto">
+                                <Nav.Link href="/">Home </Nav.Link>
+                                <Nav.Link href="/acc">Acc</Nav.Link>
+                                <Nav.Link href="/top">Top</Nav.Link>
+                                <Nav.Link href="/new">New</Nav.Link>
+                                <Nav.Link href="/playlists">Playlists</Nav.Link>
+                            </Nav>
+                            <Form inline>
+                                <FormControl
+                                    type="text"
+                                    placeholder="Search"
+                                    className="mr-sm-2"
+                                />
+                                <Button variant="btn btn-dark">Search</Button>
+                            </Form>
+                            
+                        </Navbar.Collapse>
+                    </Container>
+
+                </Navbar>
+
+                <Router>
+                    <Switch>
+                        <Route exact path="/" component={Home}/>
+                        <Route exact path="/acc" component={Acc}/>
+                        <Route exact path="/top" component={Top}/>
+                        <Route exact path="/new" component={New}/>
+                        <Route exact path="/playlists" component={Playlists}/>
+                    </Switch>
+                </Router>
+            </>
+        )
+    }
+}

src/Pages/Acc.js

@@ -0,0 +1,34 @@
+import React, { Component,} from 'react'
+import {  Form ,Button, Container } from 'react-bootstrap'
+
+export default class Acc extends Component {
+    render() {
+        return (
+            <Container style={{width:"500px"}}>
+                <h1 className="text-center">
+                    Your accaunt
+                </h1>
+                <Form>
+                    <Form.Group controlId="formBasicEmail">
+                    <Form.Label> Email</Form.Label>
+                        <Form.Control type="email" placeholder="Enter email" />
+                        <Form.Text>
+                            21jngvqnv= nv
+                        </Form.Text>
+                    </Form.Group>
+                    <Form.Group controlId="formBasicPassword">
+                        <Form.Label> Password</Form.Label>
+                        <Form.Control type="password" placeholder="Enter password" />
+                    </Form.Group>
+                    <Form.Group controlId="formBasicCheckbox">
+                        <Form.Check type="checkbox" label="Check" />
+                    </Form.Group>
+                    <Button variant="secondary" type="submit">Submit</Button>
+
+                </Form>
+            </Container>
+        )
+
+    }
+
+}

src/Pages/Home.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import CarouselBox from '../Companents/CarouselBox';
+import Carousel from 'react-bootstrap/Carousel';
+
+export default class Home extends Component{
+    render() {
+        return (
+        <div>
+           <CarouselBox/>
+        </div>
+        )
+
+    }
+
+}

src/Pages/New.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+export default class New extends Component{
+    render() {
+        return (
+        <div>
+            hello New
+        </div>
+        )
+
+    }
+
+}

src/Pages/Playlists.js

@@ -0,0 +1,146 @@
+import React, { Component } from 'react'
+
+import { Container,Nav,  Row, Col, Tab} from 'react-bootstrap'
+export default class Playlists extends Component{
+    render() {
+        return (
+            <Container >
+            <Tab.Container  className="mt-3 "id="left-tabs-example" defaulActiveKey="first" >
+            <Row>
+                 <Col sm={4} >
+                    <Nav  className="flex-column mt-2 nav nav-pills variant-dark">
+                        <Nav.Item className="">
+                            <Nav.Link eventKey="first">1990</Nav.Link>
+                        </Nav.Item>
+                        <Nav.Item>
+                            <Nav.Link eventKey="second">1995</Nav.Link>
+                        </Nav.Item>
+                        <Nav.Item>
+                            <Nav.Link eventKey="third">2000</Nav.Link>
+                        </Nav.Item>
+                        <Nav.Item>
+                            <Nav.Link eventKey="fourth">2010</Nav.Link>
+                        </Nav.Item>
+                        <Nav.Item>
+                            <Nav.Link eventKey="fifth">2015</Nav.Link>
+                        </Nav.Item>
+                    </Nav>
+                </Col> 
+                <Col sm={8}>
+                    <Tab.Content className="mt-3">
+                        <Tab.Pane eventKey="first">
+                            <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
+                            <p>
+                            ////////////////////
+                            </p>
+                        </Tab.Pane>
+                        <Tab.Pane eventKey="second">
+                            <img src="https://i.pinimg.com/originals/0f/b4/60/0fb460ca668d097740d5550b3c820ce3.jpg"/>
+                            <p>
+                            ///////////////////
+                            </p>
+                        </Tab.Pane>
+                        <Tab.Pane eventKey="third">
+                            <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
+                            <p>
+                            ////////////////
+                            </p>
+                        </Tab.Pane>
+                        <Tab.Pane eventKey="fourd">
+                            <img src="https://cdn.lifehacker.ru/wp-content/uploads/2019/07/pl-dezh_1562681584-310x671.png"/>
+                            <p>
+                           //////////////////
+                            </p>
+                        </Tab.Pane>
+                        <Tab.Pane eventKey="fifth">
+                            <img src="https://mosproducer.ru/wp-content/uploads/2020/10/1-1.jpg"/>
+                            <p>
+                            ///////////////////
+                            </p>
+                        </Tab.Pane>
+                    </Tab.Content>
+                </Col> 
+            </Row>
+            </Tab.Container>
+        </Container>
+        )
+
+    }
+
+}
+// import { Tab } from 'bootstrap'
+// // import React, { Component } from 'react'
+// import { Container,Nav,  Row, Col} from 'react-bootstrap'
+// //   
+// export default class Playlists extends Component{
+//     render() {
+//         return (
+//             <Container>
+//                 <Tab.Container id="left-tabs-example" defaulActiveKey="first" >
+//                 <Row>
+//                      <Col sm={3}>
+//                         <Nav variant="pills" className="flex-column mt-2">
+//                             <Nav.Item>
+//                                 <Nav.Link eventKey="first">1990</Nav.Link>
+//                             </Nav.Item>
+//                             <Nav.Item>
+//                                 <Nav.Link eventKey="second">1995</Nav.Link>
+//                             </Nav.Item>
+//                             <Nav.Item>
+//                                 <Nav.Link eventKey="third">2000</Nav.Link>
+//                             </Nav.Item>
+//                             <Nav.Item>
+//                                 <Nav.Link eventKey="fourth">2010</Nav.Link>
+//                             </Nav.Item>
+//                             <Nav.Item>
+//                                 <Nav.Link eventKey="fifth">2015</Nav.Link>
+//                             </Nav.Item>
+//                         </Nav>
+//                     </Col> 
+//                     <Col sm={9}>
+//                         <Tab.Content>
+//                             <Tab.Pane eventKey="first">
+//                                 <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
+//                                 <p>
+//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+                    
+//                                 </p>
+//                             </Tab.Pane>
+//                             <Tab.Pane eventKey="second">
+//                                 <img src="https://i.pinimg.com/originals/0f/b4/60/0fb460ca668d097740d5550b3c820ce3.jpg"/>
+//                                 <p>
+//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+                    
+//                                 </p>
+//                             </Tab.Pane>
+//                             <Tab.Pane eventKey="third">
+//                                 <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
+//                                 <p>
+//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+                    
+//                                 </p>
+//                             </Tab.Pane>
+//                             <Tab.Pane eventKey="fourd">
+//                                 <img src="https://cdn.lifehacker.ru/wp-content/uploads/2019/07/pl-dezh_1562681584-310x671.png"/>
+//                                 <p>
+//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+                    
+//                                 </p>
+//                             </Tab.Pane>
+//                             <Tab.Pane eventKey="fifth">
+//                                 <img src="https://mosproducer.ru/wp-content/uploads/2020/10/1-1.jpg"/>
+//                                 <p>
+//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+                    
+//                                 </p>
+//                             </Tab.Pane>
+//                         </Tab.Content>
+//                     </Col> 
+//                 </Row>
+//                 </Tab.Container>
+//             </Container>
+//         )
+
+//     }
+
+// }

src/Pages/Top.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+export default class Top extends Component{
+    render() {
+        return (
+        <div>
+            hello TOP
+        </div>
+        )
+
+    }
+
+}