create GritComp, crate HeaderComp

main
Shuhrat Tultaganov 2023-01-26 02:21:52 +03:00
parent 5898b98c24
commit f5656d5b21
10 changed files with 437 additions and 113 deletions

301
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.5", "@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5", "@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.4", "@mui/material": "^5.11.4",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
@ -18,6 +19,16 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "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": { "node_modules/@adobe/css-tools": {
@ -3181,6 +3192,31 @@
"url": "https://opencollective.com/mui" "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": { "node_modules/@mui/material": {
"version": "5.11.4", "version": "5.11.4",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.4.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.4.tgz",
@ -7403,9 +7439,9 @@
} }
}, },
"node_modules/eslint": { "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": { "dependencies": {
"@eslint/eslintrc": "^1.4.1", "@eslint/eslintrc": "^1.4.1",
"@humanwhocodes/config-array": "^0.11.8", "@humanwhocodes/config-array": "^0.11.8",
@ -7457,6 +7493,67 @@
"url": "https://opencollective.com/eslint" "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": { "node_modules/eslint-config-react-app": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", "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": { "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": { "dependencies": {
"debug": "^3.2.7", "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": { "node_modules/eslint-import-resolver-node/node_modules/debug": {
@ -7543,22 +7641,24 @@
} }
}, },
"node_modules/eslint-plugin-import": { "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": { "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", "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", "has": "^1.0.3",
"is-core-module": "^2.8.1", "is-core-module": "^2.11.0",
"is-glob": "^4.0.3", "is-glob": "^4.0.3",
"minimatch": "^3.1.2", "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" "tsconfig-paths": "^3.14.1"
}, },
"engines": { "engines": {
@ -7569,11 +7669,11 @@
} }
}, },
"node_modules/eslint-plugin-import/node_modules/debug": { "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": { "dependencies": {
"ms": "2.0.0" "ms": "^2.1.1"
} }
}, },
"node_modules/eslint-plugin-import/node_modules/doctrine": { "node_modules/eslint-plugin-import/node_modules/doctrine": {
@ -7587,10 +7687,13 @@
"node": ">=0.10.0" "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": { "node_modules/eslint-plugin-jest": {
"version": "25.7.0", "version": "25.7.0",
@ -7616,9 +7719,9 @@
} }
}, },
"node_modules/eslint-plugin-jsx-a11y": { "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": { "dependencies": {
"@babel/runtime": "^7.20.7", "@babel/runtime": "^7.20.7",
"aria-query": "^5.1.3", "aria-query": "^5.1.3",
@ -7653,9 +7756,9 @@
} }
}, },
"node_modules/eslint-plugin-react": { "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": { "dependencies": {
"array-includes": "^3.1.6", "array-includes": "^3.1.6",
"array.prototype.flatmap": "^1.3.1", "array.prototype.flatmap": "^1.3.1",
@ -14266,6 +14369,21 @@
"node": ">= 0.8.0" "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": { "node_modules/pretty-bytes": {
"version": "5.6.0", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", "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", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.4.tgz",
"integrity": "sha512-jWVwGM3vG4O0sXcW0VcIl+njCWbGCBF5vvjRpuKJajrz51AD7D6+fP1SkInZXVk5pRHf6Bnk/Yj9Of9gXxb/hA==" "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": { "@mui/material": {
"version": "5.11.4", "version": "5.11.4",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.4.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.4.tgz",
@ -22771,9 +22897,9 @@
} }
}, },
"eslint": { "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": { "requires": {
"@eslint/eslintrc": "^1.4.1", "@eslint/eslintrc": "^1.4.1",
"@humanwhocodes/config-array": "^0.11.8", "@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": { "eslint-config-react-app": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", "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": { "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": { "requires": {
"debug": "^3.2.7", "debug": "^3.2.7",
"resolve": "^1.20.0" "is-core-module": "^2.11.0",
"resolve": "^1.22.1"
}, },
"dependencies": { "dependencies": {
"debug": { "debug": {
@ -22960,31 +23125,33 @@
} }
}, },
"eslint-plugin-import": { "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": { "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", "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", "has": "^1.0.3",
"is-core-module": "^2.8.1", "is-core-module": "^2.11.0",
"is-glob": "^4.0.3", "is-glob": "^4.0.3",
"minimatch": "^3.1.2", "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" "tsconfig-paths": "^3.14.1"
}, },
"dependencies": { "dependencies": {
"debug": { "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": { "requires": {
"ms": "2.0.0" "ms": "^2.1.1"
} }
}, },
"doctrine": { "doctrine": {
@ -22995,10 +23162,10 @@
"esutils": "^2.0.2" "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": { "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": { "requires": {
"@babel/runtime": "^7.20.7", "@babel/runtime": "^7.20.7",
"aria-query": "^5.1.3", "aria-query": "^5.1.3",
@ -23041,9 +23208,9 @@
} }
}, },
"eslint-plugin-react": { "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": { "requires": {
"array-includes": "^3.1.6", "array-includes": "^3.1.6",
"array.prototype.flatmap": "^1.3.1", "array.prototype.flatmap": "^1.3.1",
@ -27531,6 +27698,12 @@
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" "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": { "pretty-bytes": {
"version": "5.6.0", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

View File

@ -5,6 +5,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.5", "@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5", "@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.4", "@mui/material": "^5.11.4",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
@ -37,5 +38,15 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari 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"
} }
} }

View File

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

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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;
}

View File

@ -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>
)
}

View File

@ -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>
// )
// }

View File

@ -1,10 +1,16 @@
import React from 'react' 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() { export default function Main() {
return ( return (
<div> <div>
<GridComp></GridComp> <Container>
<HeaderComp />
<GridComp />
{/* <TestMedia></TestMedia> */}
</Container>
</div> </div>
) )
} }

View File

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