create GritComp, crate HeaderComp

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
+        "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.4",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
@@ -18,6 +19,16 @@
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "eslint": "^8.32.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^8.6.0",
+        "eslint-plugin-import": "^2.27.5",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.32.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "prettier": "2.8.3"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3181,6 +3192,31 @@
         "url": "https://opencollective.com/mui"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.11.0.tgz",
+      "integrity": "sha512-I2LaOKqO8a0xcLGtIozC9xoXjZAto5G5gh0FYUMAlbsIHNHIjn4Xrw9rvjY20vZonyiGrZNMAlAXYkY6JvhF6A==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.11.4",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.4.tgz",
@@ -7403,9 +7439,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.31.0",
+      "version": "8.32.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
-      "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
+      "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==",
       "dependencies": {
         "@eslint/eslintrc": "^1.4.1",
         "@humanwhocodes/config-array": "^0.11.8",
@@ -7457,6 +7493,67 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-airbnb": {
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
+      "integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
+      "dev": true,
+      "dependencies": {
+        "eslint-config-airbnb-base": "^15.0.0",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5"
+      },
+      "engines": {
+        "node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react-hooks": "^4.3.0"
+      }
+    },
+    "node_modules/eslint-config-airbnb-base": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
+      "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
+      "dev": true,
+      "dependencies": {
+        "confusing-browser-globals": "^1.0.10",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-plugin-import": "^2.25.2"
+      }
+    },
+    "node_modules/eslint-config-airbnb-base/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.6.0.tgz",
+      "integrity": "sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-config-react-app": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
@@ -7485,12 +7582,13 @@
       }
     },
     "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.6",
+      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
-      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
       "dependencies": {
         "debug": "^3.2.7",
-        "resolve": "^1.20.0"
+        "is-core-module": "^2.11.0",
+        "resolve": "^1.22.1"
       }
     },
     "node_modules/eslint-import-resolver-node/node_modules/debug": {
@@ -7543,22 +7641,24 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.26.0",
+      "version": "2.27.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
-      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
       "dependencies": {
-        "array-includes": "^3.1.4",
+        "array-includes": "^3.1.6",
-        "array.prototype.flat": "^1.2.5",
+        "array.prototype.flat": "^1.3.1",
-        "debug": "^2.6.9",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-node": "^0.3.7",
-        "eslint-module-utils": "^2.7.3",
+        "eslint-module-utils": "^2.7.4",
         "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.11.0",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
+        "object.values": "^1.1.6",
-        "resolve": "^1.22.0",
+        "resolve": "^1.22.1",
+        "semver": "^6.3.0",
         "tsconfig-paths": "^3.14.1"
       },
       "engines": {
@@ -7569,11 +7669,11 @@
       }
     },
     "node_modules/eslint-plugin-import/node_modules/debug": {
-      "version": "2.6.9",
+      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dependencies": {
-        "ms": "2.0.0"
+        "ms": "^2.1.1"
       }
     },
     "node_modules/eslint-plugin-import/node_modules/doctrine": {
@@ -7587,10 +7687,13 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/ms": {
+    "node_modules/eslint-plugin-import/node_modules/semver": {
-      "version": "2.0.0",
+      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
     },
     "node_modules/eslint-plugin-jest": {
       "version": "25.7.0",
@@ -7616,9 +7719,9 @@
       }
     },
     "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.7.0",
+      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
-      "integrity": "sha512-EGGRKhzejSzXKtjmEjWNtr4SK/DkMkSzkBH7g7e7moBDXZXrqaUIxkmD7uF93upMysc4dKYEJwupu7Dff+ShwA==",
+      "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
         "aria-query": "^5.1.3",
@@ -7653,9 +7756,9 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.32.0",
+      "version": "7.32.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz",
-      "integrity": "sha512-vSBi1+SrPiLZCGvxpiZIa28fMEUaMjXtCplrvxcIxGzmFiYdsXQDwInEjuv5/i/2CTTxbkS87tE8lsQ0Qxinbw==",
+      "integrity": "sha512-vOjdgyd0ZHBXNsmvU+785xY8Bfe57EFbTYYk8XrROzWpr9QBvpjITvAXt9xqcE6+8cjR/g1+mfumPToxsl1www==",
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flatmap": "^1.3.1",
@@ -14266,6 +14369,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -19696,6 +19814,14 @@
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.4.tgz",
       "integrity": "sha512-jWVwGM3vG4O0sXcW0VcIl+njCWbGCBF5vvjRpuKJajrz51AD7D6+fP1SkInZXVk5pRHf6Bnk/Yj9Of9gXxb/hA=="
     },
+    "@mui/icons-material": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.11.0.tgz",
+      "integrity": "sha512-I2LaOKqO8a0xcLGtIozC9xoXjZAto5G5gh0FYUMAlbsIHNHIjn4Xrw9rvjY20vZonyiGrZNMAlAXYkY6JvhF6A==",
+      "requires": {
+        "@babel/runtime": "^7.20.6"
+      }
+    },
     "@mui/material": {
       "version": "5.11.4",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.4.tgz",
@@ -22771,9 +22897,9 @@
       }
     },
     "eslint": {
-      "version": "8.31.0",
+      "version": "8.32.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
-      "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
+      "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==",
       "requires": {
         "@eslint/eslintrc": "^1.4.1",
         "@humanwhocodes/config-array": "^0.11.8",
@@ -22892,6 +23018,44 @@
         }
       }
     },
+    "eslint-config-airbnb": {
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
+      "integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
+      "dev": true,
+      "requires": {
+        "eslint-config-airbnb-base": "^15.0.0",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5"
+      }
+    },
+    "eslint-config-airbnb-base": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
+      "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
+      "dev": true,
+      "requires": {
+        "confusing-browser-globals": "^1.0.10",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-config-prettier": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.6.0.tgz",
+      "integrity": "sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-config-react-app": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
@@ -22914,12 +23078,13 @@
       }
     },
     "eslint-import-resolver-node": {
-      "version": "0.3.6",
+      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
-      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
       "requires": {
         "debug": "^3.2.7",
-        "resolve": "^1.20.0"
+        "is-core-module": "^2.11.0",
+        "resolve": "^1.22.1"
       },
       "dependencies": {
         "debug": {
@@ -22960,31 +23125,33 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.26.0",
+      "version": "2.27.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
-      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
       "requires": {
-        "array-includes": "^3.1.4",
+        "array-includes": "^3.1.6",
-        "array.prototype.flat": "^1.2.5",
+        "array.prototype.flat": "^1.3.1",
-        "debug": "^2.6.9",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-node": "^0.3.7",
-        "eslint-module-utils": "^2.7.3",
+        "eslint-module-utils": "^2.7.4",
         "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.11.0",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
+        "object.values": "^1.1.6",
-        "resolve": "^1.22.0",
+        "resolve": "^1.22.1",
+        "semver": "^6.3.0",
         "tsconfig-paths": "^3.14.1"
       },
       "dependencies": {
         "debug": {
-          "version": "2.6.9",
+          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "requires": {
-            "ms": "2.0.0"
+            "ms": "^2.1.1"
           }
         },
         "doctrine": {
@@ -22995,10 +23162,10 @@
             "esutils": "^2.0.2"
           }
         },
-        "ms": {
+        "semver": {
-          "version": "2.0.0",
+          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -23011,9 +23178,9 @@
       }
     },
     "eslint-plugin-jsx-a11y": {
-      "version": "6.7.0",
+      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
-      "integrity": "sha512-EGGRKhzejSzXKtjmEjWNtr4SK/DkMkSzkBH7g7e7moBDXZXrqaUIxkmD7uF93upMysc4dKYEJwupu7Dff+ShwA==",
+      "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==",
       "requires": {
         "@babel/runtime": "^7.20.7",
         "aria-query": "^5.1.3",
@@ -23041,9 +23208,9 @@
       }
     },
     "eslint-plugin-react": {
-      "version": "7.32.0",
+      "version": "7.32.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz",
-      "integrity": "sha512-vSBi1+SrPiLZCGvxpiZIa28fMEUaMjXtCplrvxcIxGzmFiYdsXQDwInEjuv5/i/2CTTxbkS87tE8lsQ0Qxinbw==",
+      "integrity": "sha512-vOjdgyd0ZHBXNsmvU+785xY8Bfe57EFbTYYk8XrROzWpr9QBvpjITvAXt9xqcE6+8cjR/g1+mfumPToxsl1www==",
       "requires": {
         "array-includes": "^3.1.6",
         "array.prototype.flatmap": "^1.3.1",
@@ -27531,6 +27698,12 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
+    "prettier": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -37,5 +38,15 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^8.32.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "2.8.3"
   }
 }

src/App.js

@@ -1,4 +1,4 @@
-import './App.css';
+import './css/style.css'
 import Main from './Pages/Main';
 
 function App() {

src/Components/GridComp.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Unstable_Grid2';
-import Paper from '@mui/material/Paper';
-import Box from '@mui/material/Box';
-import { Hidden } from '@mui/material';
-
-const Item = styled(Paper)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
-    ...theme.typography.body2,
-    padding: theme.spacing(1),
-    textAlign: 'center',
-    color: theme.palette.text.secondary,
-  }));
-  
-
-export default function GridComp() {
-  return (
-    <div>   
-    <Box sx = {{with: "100%"}}>
-        <Grid container rowSpacing={1} columnSpacing={{xs: 1, sm: 2, md: 2}}>
-            <Grid sx={6}>
-                <img style={{width: "265px"}} src="https://animaka.ru/_next/image?url=https%3A%2F%2Fanimaka.ru%3A5000%2Fmedia%2Fimages%2F215e52c1-c1db-47cc-9981-cd2e83f2a20b.jpg&w=256&q=75" alt="" />
-                <Item sx={{width: "250px", height: "220px", overflow: "hidden", flexWrap: "wrap"}}>
-                    {/* <div style={{width: "100%", whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: "2vmin"}}>
-                        teqweqweqweqweq
-                    </div> */}
-                    <div style={{overflow: 'hidden', textOverflow: "ellipsis", whiteSpace: 'nowrap', fontWeight: 'bold'}}>
-                        Test name
-                        
-                    </div>
-                    <div style={{overflow: 'hidden', textOverflow: "ellipsis", whiteSpace: 'nowrap', fontWeight: 'normal', textAlign: "left"}}>
-                        Test name
-                        
-                    </div>
-                </Item>
-            </Grid>
-        </Grid>
-</Box>
-</div>
-  )
-}

src/Components/GridComp/GridComp.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import Card from '@mui/material/Card'
+import { CardContent, CardMedia, Grid } from '@mui/material'
+import Typography from '@mui/material/Typography'
+import styles from './GridComp.module.css'
+
+const Rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
+export default function GridComp() {
+    return (
+        <Grid container spacing={2} sx={{ width: '100%' }} xs={9}>
+            {Array.from(Array(1000)).map(() => (
+                <Grid item xs={12} sm={3}>
+                    <Card sx={{ height: '100%' }}>
+                        <a href="/" className={styles.aboximg}>
+                            <CardMedia className={styles.MediaCard}>
+                                <div style={{ boxSizing: 'inherit' }}>
+                                    <div className={styles.divbgimg}>
+                                        <div className={styles.divbgimg2}>
+                                            <img
+                                                alt=""
+                                                className={styles.imgBg}
+                                                src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="
+                                            />
+                                            <img
+                                                alt=""
+                                                className={styles.imgPreViev}
+                                                src="https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                {/* <img src='https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360'></img> */}
+                            </CardMedia>
+                        </a>
+
+                        <CardContent>
+                            <Typography component="h5" className={styles.title}>
+                                asdasdsasddasdasdasdasdasdasdas
+                            </Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                asfasfaasfasfa
+                            </Typography>
+                            <Typography
+                                variant="body2"
+                                sx={{ display: 'block' }}
+                            >
+                                {Array.from(Array(Rand(1, 5))).map(() => (
+                                    <a className={styles.Janres} href="/">
+                                        dsadas
+                                    </a>
+                                ))}
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+            ))}
+        </Grid>
+    )
+}

src/Components/GridComp/GridComp.module.css

@@ -0,0 +1,56 @@
+.title{
+    word-break: break-all;
+}
+.title:hover{
+    color: aqua;
+}
+.aboximg{
+    display:inline-flex;
+    width: 100%;
+}
+.MediaCard{
+    width:  100%;
+    position: relative;
+}
+
+.divbgimg{
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    margin: 0;
+}
+.divbgimg2{
+    box-sizing: border-box;
+    display: block;
+    max-width: 100%;
+}
+.imgBg{
+    max-width: 100%;
+    display: block;
+    margin: 0;
+    border: none;
+    padding: 0;
+}
+
+.imgPreViev{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 100%;
+    max-height: 100%;
+}
+.Janres{
+    margin-right: 5px;
+    display: inline-block;
+    color: black;
+    text-decoration: none;
+}
+.Janres:hover{
+    color: blueviolet;
+}

src/Components/HeaderComp/HeaderComp.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { AppBar, Toolbar, Typography, Button, IconButton } from '@mui/material'
+import MenuIcon from '@mui/icons-material/Menu'
+
+export default function HeaderComp() {
+    return (
+        <header>
+            <AppBar position="static">
+                <Toolbar>
+                    <IconButton
+                        size="large"
+                        edge="start"
+                        color="inherit"
+                        aria-label="menu"
+                        sx={{ mr: 2 }}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography
+                        variant="h6"
+                        component="div"
+                        sx={{ flexGrow: 1 }}
+                    >
+                        News
+                    </Typography>
+                    <Button color="inherit">Login</Button>
+                </Toolbar>
+            </AppBar>
+        </header>
+    )
+}

src/Components/TestMedia.jsx

@@ -0,0 +1,25 @@
+// import React from 'react'
+// import Card from '@mui/material/Card'
+// import {CardActions, CardContent, CardMedia, Grid } from '@mui/material'
+// import Button from '@mui/material/Button'
+// import Typography from '@mui/material/Typography'
+// import Paper from '@mui/material/Paper'
+
+// export default function TestMedia() {
+//   return (
+//     // <>
+//     //     <Grid container spacing={2} sx={{width: '100%'}} xs={9}>
+//     //         {Array.from(Array(1000)).map((_, index)=>(
+//     //             <Grid item xs={15} sm={3}>
+//     //                 <Paper elevation={3}>
+//     //                 <CardMedia sx={{height: 250}} image='https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360'>
+//     //                 </CardMedia>
+//     //                 </Paper>
+//     //             </Grid>
+//     //         ))}
+//     //     </Grid>
+
+//     // </>
+//     <div></div>
+//   )
+// }

src/Pages/Main.jsx

@@ -1,10 +1,16 @@
 import React from 'react'
-import GridComp from '../Components/GridComp'
+import { Container } from '@mui/material/'
+import GridComp from '../Components/GridComp/GridComp'
+import HeaderComp from '../Components/HeaderComp/HeaderComp'
 
 export default function Main() {
     return (
         <div>
-        <GridComp></GridComp>
+            <Container>
+                <HeaderComp />
+                <GridComp />
+                {/* <TestMedia></TestMedia> */}
+            </Container>
         </div>
     )
 }

src/css/style.css

@@ -0,0 +1,5 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}