added a few components

package-lock.json

@@ -2025,49 +2025,177 @@
       }
     },
     "@mui/base": {
-      "version": "5.0.0-alpha.69",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.69.tgz",
-      "integrity": "sha512-IxUUj/lkilCTNBIybQxyQGW/zpxFp490G0QBQJgRp9TJkW2PWSTLvAH7gcH0YHd0L2TAf1TRgfdemoRseMzqQA==",
-      "requires": {
-        "@babel/runtime": "^7.17.0",
-        "@emotion/is-prop-valid": "^1.1.1",
-        "@mui/utils": "^5.4.2",
-        "@popperjs/core": "^2.4.4",
-        "clsx": "^1.1.1",
-        "prop-types": "^15.7.2",
-        "react-is": "^17.0.2"
+      "version": "5.0.0-alpha.89",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.89.tgz",
+      "integrity": "sha512-2g18hzt947qQ3gQQPOPEBfzQmaT2wafVhyJ7ZOZXeU6kKb88MdlHoPkK2lKXCHMBtRGnnsiF36j0rmhQXu0I5g==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/is-prop-valid": "^1.1.3",
+        "@mui/types": "^7.1.4",
+        "@mui/utils": "^5.9.0",
+        "@popperjs/core": "^2.11.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
       },
       "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz",
+          "integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4"
+          }
+        },
+        "@mui/types": {
+          "version": "7.1.4",
+          "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.4.tgz",
+          "integrity": "sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ=="
+        },
+        "@mui/utils": {
+          "version": "5.9.0",
+          "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.9.0.tgz",
+          "integrity": "sha512-GAaiWP6zBC3RE1NHP9y1c1iKZh5s/nyKKqWxfTrw5lNQY5tWTh9/47F682FuiE5WT1o3h4w/LEkSSIZpMEDzrA==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@types/prop-types": "^15.7.5",
+            "@types/react-is": "^16.7.1 || ^17.0.0",
+            "prop-types": "^15.8.1",
+            "react-is": "^18.2.0"
+          }
+        },
+        "@types/prop-types": {
+          "version": "15.7.5",
+          "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+          "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+        },
+        "clsx": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+          "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+        },
         "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
         }
       }
     },
-    "@mui/material": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.2.tgz",
-      "integrity": "sha512-jmeLWEO6AA6g7HErhI3MXVGaMZtqDZjDwcHCg24WY954wO38Xn0zJ53VfpFc44ZTJLV9Ejd7ci9fLlG/HmJCeg==",
+    "@mui/icons-material": {
+      "version": "5.8.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.8.4.tgz",
+      "integrity": "sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==",
       "requires": {
-        "@babel/runtime": "^7.17.0",
-        "@mui/base": "5.0.0-alpha.69",
-        "@mui/system": "^5.4.2",
-        "@mui/types": "^7.1.2",
-        "@mui/utils": "^5.4.2",
-        "@types/react-transition-group": "^4.4.4",
-        "clsx": "^1.1.1",
-        "csstype": "^3.0.10",
-        "hoist-non-react-statics": "^3.3.2",
-        "prop-types": "^15.7.2",
-        "react-is": "^17.0.2",
+        "@babel/runtime": "^7.17.2"
+      }
+    },
+    "@mui/material": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.9.0.tgz",
+      "integrity": "sha512-KZN3QEeCtwSP1IRpDZ7KQghDX7tyxZojADRCn+UKnoq8HUGNMJm2XKdb7hy9/ybaSW4EXQSKXSGg1AjdfS7Cdg==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/base": "5.0.0-alpha.89",
+        "@mui/system": "^5.9.0",
+        "@mui/types": "^7.1.4",
+        "@mui/utils": "^5.9.0",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
         "react-transition-group": "^4.4.2"
       },
       "dependencies": {
+        "@emotion/cache": {
+          "version": "11.9.3",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.9.3.tgz",
+          "integrity": "sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/sheet": "^1.1.1",
+            "@emotion/utils": "^1.0.0",
+            "@emotion/weak-memoize": "^0.2.5",
+            "stylis": "4.0.13"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz",
+          "integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
+        },
+        "@mui/private-theming": {
+          "version": "5.9.0",
+          "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.9.0.tgz",
+          "integrity": "sha512-t0ZsWxE/LvX5RH5azjx1esBHbIfD9zjnbSAYkpE59BPpkOrqAYDGoJguL2EPd9LaUb6COmBozmAwNenvI6RJRQ==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@mui/utils": "^5.9.0",
+            "prop-types": "^15.8.1"
+          }
+        },
+        "@mui/styled-engine": {
+          "version": "5.8.7",
+          "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.8.7.tgz",
+          "integrity": "sha512-tVqtowjbYmiRq+qcqXK731L9eWoL9H8xTRhuTgaDGKdch1zlt4I2UwInUe1w2N9N/u3/jHsFbLcl1Un3uOwpQg==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@emotion/cache": "^11.9.3",
+            "csstype": "^3.1.0",
+            "prop-types": "^15.8.1"
+          }
+        },
+        "@mui/system": {
+          "version": "5.9.0",
+          "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.9.0.tgz",
+          "integrity": "sha512-KLZDYMmT1usokEJH+raGTh1SbdOx4BVrT+wg8nRpKGNii2sfc3ntuJSKuv3Fu9oeC9xVFTnNBHXKrpJuxeDcqg==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@mui/private-theming": "^5.9.0",
+            "@mui/styled-engine": "^5.8.7",
+            "@mui/types": "^7.1.4",
+            "@mui/utils": "^5.9.0",
+            "clsx": "^1.2.1",
+            "csstype": "^3.1.0",
+            "prop-types": "^15.8.1"
+          }
+        },
+        "@mui/types": {
+          "version": "7.1.4",
+          "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.4.tgz",
+          "integrity": "sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ=="
+        },
+        "@mui/utils": {
+          "version": "5.9.0",
+          "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.9.0.tgz",
+          "integrity": "sha512-GAaiWP6zBC3RE1NHP9y1c1iKZh5s/nyKKqWxfTrw5lNQY5tWTh9/47F682FuiE5WT1o3h4w/LEkSSIZpMEDzrA==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@types/prop-types": "^15.7.5",
+            "@types/react-is": "^16.7.1 || ^17.0.0",
+            "prop-types": "^15.8.1",
+            "react-is": "^18.2.0"
+          }
+        },
+        "@types/prop-types": {
+          "version": "15.7.5",
+          "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+          "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+        },
+        "clsx": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+          "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+        },
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+        },
         "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
         }
       }
     },
@@ -2099,6 +2227,79 @@
         "prop-types": "^15.7.2"
       }
     },
+    "@mui/styles": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.9.0.tgz",
+      "integrity": "sha512-RV8XUXzpWQ65fjOcu6WHPDZjBpdTN0+YG2JJbKWzz7yphG9SFNp13wLk0BHP2O+C7VBoIqmIg1twOZAIwMaBzg==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/hash": "^0.8.0",
+        "@mui/private-theming": "^5.9.0",
+        "@mui/types": "^7.1.4",
+        "@mui/utils": "^5.9.0",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.0",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.8.2",
+        "jss-plugin-camel-case": "^10.8.2",
+        "jss-plugin-default-unit": "^10.8.2",
+        "jss-plugin-global": "^10.8.2",
+        "jss-plugin-nested": "^10.8.2",
+        "jss-plugin-props-sort": "^10.8.2",
+        "jss-plugin-rule-value-function": "^10.8.2",
+        "jss-plugin-vendor-prefixer": "^10.8.2",
+        "prop-types": "^15.8.1"
+      },
+      "dependencies": {
+        "@mui/private-theming": {
+          "version": "5.9.0",
+          "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.9.0.tgz",
+          "integrity": "sha512-t0ZsWxE/LvX5RH5azjx1esBHbIfD9zjnbSAYkpE59BPpkOrqAYDGoJguL2EPd9LaUb6COmBozmAwNenvI6RJRQ==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@mui/utils": "^5.9.0",
+            "prop-types": "^15.8.1"
+          }
+        },
+        "@mui/types": {
+          "version": "7.1.4",
+          "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.4.tgz",
+          "integrity": "sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ=="
+        },
+        "@mui/utils": {
+          "version": "5.9.0",
+          "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.9.0.tgz",
+          "integrity": "sha512-GAaiWP6zBC3RE1NHP9y1c1iKZh5s/nyKKqWxfTrw5lNQY5tWTh9/47F682FuiE5WT1o3h4w/LEkSSIZpMEDzrA==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@types/prop-types": "^15.7.5",
+            "@types/react-is": "^16.7.1 || ^17.0.0",
+            "prop-types": "^15.8.1",
+            "react-is": "^18.2.0"
+          }
+        },
+        "@types/prop-types": {
+          "version": "15.7.5",
+          "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+          "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+        },
+        "clsx": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+          "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+        },
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+        },
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "@mui/system": {
       "version": "5.4.2",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.4.2.tgz",
@@ -2185,9 +2386,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
-      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
     },
     "@rollup/plugin-babel": {
       "version": "5.3.0",
@@ -2805,9 +3006,9 @@
       }
     },
     "@types/react-transition-group": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
-      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
       "requires": {
         "@types/react": "*"
       }
@@ -4403,6 +4604,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -5877,6 +6087,56 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",
       "integrity": "sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg=="
     },
+    "framer-motion": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz",
+      "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "framesync": "5.3.0",
+        "hey-listen": "^1.0.8",
+        "popmotion": "9.3.6",
+        "style-value-types": "4.1.4",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "0.8.8",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+          "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+          "optional": true,
+          "requires": {
+            "@emotion/memoize": "0.7.4"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+          "optional": true
+        },
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
+    "framesync": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz",
+      "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -6093,6 +6353,11 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "history": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
@@ -6298,6 +6563,11 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6489,6 +6759,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -8022,6 +8297,84 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.0.tgz",
       "integrity": "sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg=="
     },
+    "jss": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
+      "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
+      "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
+      "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
+      "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
+      "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
+      "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
+      "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
+      "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.9.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz",
@@ -8841,6 +9194,24 @@
         }
       }
     },
+    "popmotion": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz",
+      "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==",
+      "requires": {
+        "framesync": "5.3.0",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "4.1.4",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -9805,6 +10176,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-material-ui-carousel": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz",
+      "integrity": "sha512-jUbC5aBWqbbbUOOdUe3zTVf4kMiZFwKJqwhxzHgBfklaXQbSopis4iWAHvEOLcZtSIJk4JAGxKE0CmxDoxvUuw==",
+      "requires": {
+        "@emotion/react": "^11.7.1",
+        "@emotion/styled": "^11.6.0",
+        "@mui/icons-material": "^5.4.1",
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "framer-motion": "^4.1.17"
+      }
+    },
     "react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
@@ -10789,6 +11173,22 @@
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
     },
+    "style-value-types": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz",
+      "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "styled-components": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
@@ -11083,6 +11483,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "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.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

package.json

@@ -6,13 +6,16 @@
   "dependencies": {
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.4.2",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.9.0",
     "@mui/styled-engine-sc": "^5.4.2",
+    "@mui/styles": "^5.9.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-material-ui-carousel": "^3.4.2",
     "react-redux": "^7.2.6",
     "react-router": "^6.2.1",
     "react-scripts": "5.0.0",

src/components/Auth.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import {Button, ButtonGroup, TextField} from "@mui/material";
 import {useState} from "react";
 import {connect} from "react-redux";
-import {changeAuthData, changeAuthDataAsync} from "../store/actionCreators/authActionCreators"
+import {changeAuthData, changeAuthDataAsync} from "../store/actionCreators/ActionCreators"
 import {useNavigate} from "react-router-dom";
 
 

src/components/AvaLoginBlock.js

@@ -0,0 +1,24 @@
+import {Avatar} from "@mui/material";
+import avatar from "../assets/img/avatarGolub.jpg";
+import styled from "styled-components";
+
+const Nick = styled.div`
+  margin-left: 20px;
+  font-size: 15px;
+  padding-top: 10px;
+  font-weight: bold;
+
+`
+const AvatarNickWrapper = styled.div`
+  display: flex`
+
+function AvaLoginBlock({name, urlAva}) {
+    return <>
+        <AvatarNickWrapper>
+            <Avatar src={urlAva ? urlAva : avatar} alt={"avatar"} sx={{border: "1px solid grey"}}/>
+            <Nick>{name}</Nick>
+        </AvatarNickWrapper>
+    </>
+}
+
+export default AvaLoginBlock;

src/components/CommentsBlock.js

@@ -0,0 +1,55 @@
+import {useEffect, useState} from "react";
+import {gqlOnePost} from "../shared/services&utilits/gqlRequest";
+import AvaLoginBlock from "./AvaLoginBlock";
+import TimeOfCreation from "./TimeOfCreation";
+import styled from 'styled-components';
+
+const CommentsBlockStyled = styled.div`
+  width: 100%;
+  overflow: auto;
+  height: 60%;
+`
+const AnswerWrap = styled.div`
+  margin-left: 30px`
+
+function CommentsBlock(props) {
+    // console.log(props.id)
+    const [postData, setPostData] = useState(null);
+
+    useEffect(() => {
+        if (!postData) {
+            gqlOnePost(props.id).then(res => res.json())
+                .then(data =>{
+                    // !props.isLikesRendered && props.setLikes(data["data"].PostFindOne.likes)
+                    setPostData(data["data"].PostFindOne);
+                })
+        }
+    }, [])
+    const Comment = ({commentData}) => {
+        // console.log(commentData)
+
+        return <>
+            <AvaLoginBlock name={commentData.owner.login} urlAva={commentData.owner.avatar?.url}
+                           styled={{height: "30px"}}/>
+            <p>{commentData.text}</p>
+            <TimeOfCreation createdTime={commentData.createdAt}/>
+            {commentData.answers &&
+            <AnswerWrap>
+                <p>OTVET</p>
+                {commentData.answers.map((item, i) => <Comment commentData={item} key={i}/>)}
+            </AnswerWrap>
+            }
+        </>
+    }
+    console.log(postData)
+    return (<CommentsBlockStyled>
+            <div>комент</div>
+            {postData && postData?.comments &&
+            <>
+                {postData.comments.map((item, i) => <Comment commentData={item} key={i}/>)}
+            </>}
+        </CommentsBlockStyled>
+    )
+}
+
+export default CommentsBlock;

src/components/LikeBlock.js

@@ -0,0 +1,3 @@
+function LikeBlock(){
+
+}

src/components/ModalWindow.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+const ModalWindowWrapper = styled.div`
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const InnerWrapper = styled.div`
+  width: 80%;
+  height: 80%;
+  background-color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  z-index: 101;
+  display: flex;
+  
+`
+
+function ModalWindow({children, closeModal}) {
+
+    return (
+        <ModalWindowWrapper onClick={() => closeModal()}>
+            <InnerWrapper onClick={(e) => {
+                e.stopPropagation()
+            }}>
+                {children}
+            </InnerWrapper>
+        </ModalWindowWrapper>
+    )
+}
+
+export default ModalWindow;

src/components/OwnerHeader.js

@@ -2,22 +2,24 @@ import {Avatar} from '@mui/material';
 import styled from 'styled-components';
 import {connect} from "react-redux";
 import {useEffect} from "react";
-import {changeAuthData, changeAuthDataAsync} from "../store/actionCreators/authActionCreators";
+import {changeAuthData, changeAuthDataAsync, setUserDataAsync} from "../store/actionCreators/ActionCreators";
 import {useNavigate} from "react-router-dom";
 import avatar from "../assets/img/avatarGolub.jpg"
 
 const HeaderWrapper = styled.div`
   display: flex;
-  justify-content: space-around;
+  justify-content: space-evenly;
   box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(41, 78, 255, 0);
 `
 
 const OwnerHeader = (props) => {
     const navigate = useNavigate();
-
     useEffect(() => {
-        // props.changeAuthDataAsync({login, password, "ownerData", navigateCallback: navigate})
-    }, [props.id])
+        if (!props.ownerData) {
+            props.setUserDataAsync(props.id, true)
+        }
+
+    })
 
     const Logo = () => {
         return (
@@ -36,28 +38,25 @@ const OwnerHeader = (props) => {
 
     return (
         <HeaderWrapper>
+            <button onClick={logout}>Logout</button>
             <Logo/>
-
-            <Avatar  src={avatar} alt={"avatar"} sx={{border:"1px solid grey"}}/>
-
-
             <p>Hello</p>
-            <button onClick={logout}>Logout</button>
-
+            <Avatar  src={props.ownerData && props.ownerData.avatar ? props.ownerData.avatar.url : avatar} alt={"avatar"} sx={{border:"1px solid grey"}}/>
         </HeaderWrapper>
     )
 };
 
 const mapStateToProps = (state) => {
-    console.log(state)
     return {
-        id: state.auth.user.sub.id
+        id: state.auth.user.sub.id,
+        ownerData: state.ownerData,
     }
 }
 const mapDispatchToProps = (dispatch) => {
     return {
         changeAuthData: (authData) => dispatch(changeAuthData(authData)),
-        changeAuthDataAsync: (authData) => dispatch(changeAuthDataAsync(authData))
+        changeAuthDataAsync: (authData) => dispatch(changeAuthDataAsync(authData)),
+        setUserDataAsync: (id, isOwner) => dispatch(setUserDataAsync(id, isOwner)),
     }
 }
 

src/components/TimeOfCreation.js

@@ -0,0 +1,10 @@
+function TimeOfCreation({createdTime}) {
+
+    let options =  {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' }
+    let date = new Date(+createdTime)
+    date = date.toLocaleDateString("en-US", options)
+    return <p>{date}</p>
+
+}
+
+export default TimeOfCreation;

src/components/UserContent.js

@@ -1,39 +1,53 @@
 import {connect} from "react-redux";
 import styled from 'styled-components';
-import {useEffect} from "react";
-import {setActiveUserDataAsync} from "../store/actionCreators/authActionCreators";
-import avatar from "../assets/img/avatarGolub.jpg"
+import {useEffect, useState} from "react";
+import {setActiveUserAllPostsAsync, setUserDataAsync} from "../store/actionCreators/ActionCreators";
+import avatar from "../assets/img/avatarGolub.jpg";
+import picture from "../assets/img/brokenPicture.png";
+import ModalWindow from "./ModalWindow";
+import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion';
+import Carousel from 'react-material-ui-carousel'
+import CommentsBlock from "./CommentsBlock"
+import AvaLoginBlock from "./AvaLoginBlock";
 
 const UserContentWrapper = styled.div`
   margin-top: 30px;
   width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 `
 const AvatarBlock = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
-  width: 40%;
+  margin-right: 100px;
 `
 const PostsContainer = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  max-width: 1000px;
+  flex-wrap: wrap;
+  justify-content: center;
 `
 const UserInfoWrapper = styled.div`
   display: flex;
-  width: 100%;
+  width: 1000px;
+  justify-content: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
 `
 const UserInfoBlockWrapper = styled.div`
   display: flex;
-
-  justify-content: space-around;
-  width: 60%;
+  justify-content: flex-start;
 `
 const UserInfoBlockStyled = styled.div`
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  width: 33%;
+  margin: 0 40px;
+  flex-direction: column;
 `
 const AvatarWrapper = styled.div`
   width: 100px;
@@ -44,63 +58,175 @@ const AvatarWrapper = styled.div`
   display: flex;
   align-items: center;
 `
+const PostWrapper = styled.div`
+  position: relative;
+  display: flex;
+  min-width: 300px;
+  max-width: 300px;
+  margin: 15px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
+`
+const LogoManyImg = styled.div`
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  width: 25px;
+  height: 35px;
+  transform: scaleX(-1);
+`
+const PicsInModalWrapper = styled.div`
+  width: 50%;
+  max-height: 100%;
+  margin: 30px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
+`
+const AvaLoginWrap = styled.div`
+  display: flex;
+  margin-top: 30px;
+  width: 80%;
+
+`
+const DescriptionPostWrapper = styled.div`
+  height: fit-content;
+  width: 100%;
+  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
+`
+const InfoBlockInModalWrapper = styled.div`
+  width: 50%;
+`
+const Title = styled.p``
+const Text = styled.p``
+const tempUser = "62c1cc5e4535fc62e2a185ad"; // test - should be deleted
+
 
 function UserContent(props) {
 
+    const [likes, setLikes] = useState(null);
+
     useEffect(() => {
         if (!props.activeUser) {
-            props.setActiveUserDataAsync(props.id)
+            props.setUserDataAsync(props.id)
         }
-    })
+        if (props.activeUser && !props.activeUserPosts.length) {
 
-    console.log(props)
+            // props.setActiveUserAllPostsAsync(tempUser);
+            props.setActiveUserAllPostsAsync(props.activeUser._id)
+        }
+    })
 
     const UserInfoBlock = ({count, description}) => {
         return (<UserInfoBlockStyled>
-            <p>{count?.count ? count.count : 0}</p>
+            <p>{count ? count : 0}</p>
             <p>{description}</p>
         </UserInfoBlockStyled>)
     }
+    const Post = ({post}) => {
+        const [isModal, setModal] = useState(false)
+        console.log(post)
+        function toggleModalWindow() {
+            setModal(!isModal)
+        }
+
+        const ImgBlock = ({images}) => {
+            return (
+                <>
+                    {!images && <img src={picture} alt={"pic"}/>}
+                    {images && images.length === 1 && <img src={images[0].url} alt={"pic"} style={{width: "100%"}}/>}
+                    {images && images.length > 1 && <div style={{width: "100%"}}>
+                        <Carousel autoPlay={false} navButtonsAlwaysVisible={true}>{
+                            images.map((item, i) => <img src={item.url} key={i} style={{width: "100%"}}
+                                                         alt={"picture"}/>)
+                        }
+                        </Carousel>
+                    </div>}
+                </>
+                // (images?.length && images.length > 1) && console.log("many pics") || (images && images.length === 1) &&
+                //  <img src={images[0].url} alt={"pic"} style={{width:"100%"}}/> || <img src={picture} alt={"pic"}/>
+                // <img src={images[0].url} alt={"pic"}/>
+            )
+        };
+
+        console.log(post)
+        return (
+            <PostWrapper onClick={() => toggleModalWindow()}>
+                <img src={post.images ? post.images[0].url : picture} alt="post" style={{width: "100%"}}/>
+                {
+                    post.images?.length > 1 && <LogoManyImg>
+                        <AutoAwesomeMotionIcon/>
+                    </LogoManyImg>
+                }
+                {isModal &&
+                <ModalWindow closeModal={toggleModalWindow}>
+                    <PicsInModalWrapper>
+                        <ImgBlock images={post.images}/>
+                    </PicsInModalWrapper>
+                    <InfoBlockInModalWrapper>
+
+                        <AvaLoginWrap>
+                            <AvaLoginBlock urlAva={props.activeUser.avatar.url} name={props.activeUser.login}/>
 
+                        </AvaLoginWrap>
+                        <DescriptionPostWrapper>
+                            <Title>Title:{post.title}</Title>
+                            <Text>{post.text}</Text>
+                        </DescriptionPostWrapper>
+
+                        <CommentsBlock id={post._id} setLikes={setLikes} isLikesRendered={likes !== null}/>
+                        {/*<LikeBlock/>*/}
+
+                    </InfoBlockInModalWrapper>
+                </ModalWindow>
+                }
+            </PostWrapper>
+        )
+    }
     return (
         <>
             {props.activeUser && <UserContentWrapper>
                 <UserInfoWrapper>
                     <AvatarBlock>
                         <AvatarWrapper>
-                            <img style={{height:"100%"}} src={props.activeUser.avatar ? props.activeUser.avatar : avatar} alt={"avatar"}/>
+                            <img style={{height: "100%"}}
+                                 src={props.activeUser && props.activeUser.avatar ? props.activeUser.avatar.url : avatar}
+                                 alt={"avatar"}/>
                         </AvatarWrapper>
                         <h2>{props.activeUser.login}</h2>
                     </AvatarBlock>
                     <UserInfoBlockWrapper>
-                        <p>кол-во публикаций</p>
-                        <UserInfoBlock count={props.activeUser.followers} description={"followers"}/>
-                        <UserInfoBlock count={props.activeUser.following} description={"followings"}/>
+                        <UserInfoBlock count={props.activeUserPosts?.length} description={"posts"}/>
+                        <UserInfoBlock count={props.activeUser.followers?.length} description={"followers"}/>
+                        <UserInfoBlock count={props.activeUser.following?.length} description={"followings"}/>
                     </UserInfoBlockWrapper>
                 </UserInfoWrapper>
 
+                {props.activeUserPosts &&
                 <PostsContainer>
-                    посты
-                </PostsContainer>
-
-
+                    {props.activeUserPosts.map((post, index) => <Post post={post} key={index}/>)}
+                </PostsContainer>}
             </UserContentWrapper>
             }
         </>
     )
-};
+}
 
-const mapStateToProps = (state) => {
+;
 
+const mapStateToProps = (state) => {
     return {
         id: state.auth.user.sub.id,
         activeUser: state.activeUser,
-
+        activeUserPosts: state.activeUserPosts,
     }
 }
+
 const mapDispatchToProps = (dispatch) => {
     return {
-        setActiveUserDataAsync: (id) => dispatch(setActiveUserDataAsync(id))
+        setUserDataAsync: (id) => dispatch(setUserDataAsync(id)),
+        setActiveUserAllPostsAsync: (id) => dispatch(setActiveUserAllPostsAsync(id)),
     }
 }
 

src/shared/services&utilits/gqlRequest.js

@@ -40,7 +40,7 @@ export const gqlRegistration=(login,password)=>gql(`mutation register($login: St
             }`, {login: String(login), password: String(password)}
 )
 
-export const actionAboutMe = (_id) =>gql(`query AboutMe($userId:String){
+export const gqlAboutUser = (_id) =>gql(`query AboutMe($userId:String){
             UserFindOne(query:$userId)
             {
               _id createdAt login nick avatar{_id url} 
@@ -58,4 +58,52 @@ export const gqlLogin=(login,password)=>gql(
         login(login: $login, password: $password)
         }`,
         {login: String(login), password: String(password)}
+)
+
+export const gqlAllPosts = (userId) =>gql(
+            `query allPosts($userId:String!){
+  PostFind(query:$userId){
+           owner{_id} _id title text images{_id url} createdAt
+    }
+}`,
+            {
+                userId: JSON.stringify([
+                    { ___owner: userId },
+                    {
+                        sort: [{ _id: -1 }],
+                        skip: [0],
+                        limit: [100],
+                    },
+                ]),
+            },
+
+    )
+
+export const gqlOnePost = (_id)=>gql(
+    `query OneFind($post:String){
+        PostFindOne(query:$post){
+       _id title text images{_id url}
+       owner{_id login avatar{_id url}}
+       createdAt
+       comments{
+         _id, createdAt, text  owner{_id login avatar{_id url}}
+         answers{
+           _id, createdAt, text owner{_id login  avatar{_id url}}
+          
+         }
+       owner{_id login avatar{_id url}}}
+       likes{
+         _id
+         owner{				
+            _id login avatar {_id url}
+           }
+     }
+       
+ }
+     }
+
+      `,
+    {
+        post: JSON.stringify([{ _id }]),
+    },
 )

src/store/actionCreators/authActionCreators.js

@@ -1,4 +1,4 @@
-import {actionAboutMe, gqlLogin, gqlRegistration} from "../../shared/services&utilits/gqlRequest";
+import {gqlAboutUser, gqlLogin, gqlRegistration, gqlAllPosts} from "../../shared/services&utilits/gqlRequest";
 import {jwtDecode} from "../../shared/services&utilits/utilits";
 
 export const changeAuthData = authData => ({
@@ -39,7 +39,6 @@ export const changeAuthDataAsync = ({login, password, authType, navigateCallback
             const responseData = await response.json();
             console.log(responseData)
             const token = responseData.data.login;
-            console.log(token)
             if (jwtDecode(token)){
                 localStorage.authToken = token
             }
@@ -55,21 +54,49 @@ export const changeAuthDataAsync = ({login, password, authType, navigateCallback
     }
 };
 
-export const setActiveUserDataAsync = (id) => {
+export const setUserDataAsync = (id, isOwner) => {
+
     return async (dispatch) => {
         let response = ""
-
-            response = await actionAboutMe(id)
+            response = await gqlAboutUser(id)
 
             if (!response.ok) {
                 dispatch(setError("No user data received"))
             }
             const responseData = await response.json();
-            console.log(responseData)
-        dispatch(setActiveUserData(responseData.data.UserFindOne))
+            if(isOwner){
+                dispatch(setOwnerData(responseData.data.UserFindOne))
+            }else{
+                dispatch(setActiveUserData(responseData.data.UserFindOne))
+            }
+
         }
 };
+
 export const setActiveUserData =(data)=>({
     type: "SET_ACTIVE_USER_DATA",
     payload: data,
-} )
+} )
+export const setOwnerData =(data)=>({
+    type: "SET_OWNER_DATA",
+    payload: data,
+} )
+export const setActiveUserAllPostsAsync = (id)=>{
+    return async(dispatch)=>{
+        let response = ""
+        response = await gqlAllPosts(id)
+
+        // if (!response.ok) {
+        //     dispatch(setError("No user data received"))
+        // }
+
+        const responseData = await response.json();
+        dispatch(setActiveUserAllPosts(responseData.data.PostFind))
+        console.log(responseData.data.PostFind)
+    }
+}
+
+export const setActiveUserAllPosts =(data)=>({
+    type: "SET_ACTIVE_USER_ALL_POSTS",
+    payload: data,
+})

src/store/rootReducer.js

@@ -9,10 +9,11 @@ const initialState = {
                     0: "user",
                     1: 1657471670,
                 }
-            }
-        }
+            }},
     },
     activeUser: null,
+    activeUserPosts: [],
+    ownerData: null,
     error: {
         auth: null,
     }
@@ -28,10 +29,19 @@ const rootReducer = (state = initialState, action) => {
                 ...state, error: {...state.error, auth: action.payload}
             }
         case "SET_ACTIVE_USER_DATA":
-            console.log(action.payload)
             return{
                 ...state, activeUser: action.payload,
             }
+        case "SET_ACTIVE_USER_ALL_POSTS":
+            console.log(action.payload)
+            return{
+                ...state,
+                activeUserPosts: action.payload
+            }
+        case "SET_OWNER_DATA":
+            return{
+                ...state, ownerData: action.payload,
+            }
         default:
             return state
     }