stulyaganov
/
front-wiki-films
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

301
package-lock.json generated
View File

@ -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",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
"integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
"version": "8.32.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
"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",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
"integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
"version": "0.3.7",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
"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",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
"integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
"version": "2.27.5",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
"integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
"dependencies": {
"array-includes": "^3.1.4",
"array.prototype.flat": "^1.2.5",
"debug": "^2.6.9",
"array-includes": "^3.1.6",
"array.prototype.flat": "^1.3.1",
"array.prototype.flatmap": "^1.3.1",
"debug": "^3.2.7",
"doctrine": "^2.1.0",
"eslint-import-resolver-node": "^0.3.6",
"eslint-module-utils": "^2.7.3",
"eslint-import-resolver-node": "^0.3.7",
"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",
"resolve": "^1.22.0",
"object.values": "^1.1.6",
"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",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
"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": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
"node_modules/eslint-plugin-import/node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"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",
"resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.0.tgz",
"integrity": "sha512-EGGRKhzejSzXKtjmEjWNtr4SK/DkMkSzkBH7g7e7moBDXZXrqaUIxkmD7uF93upMysc4dKYEJwupu7Dff+ShwA==",
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
"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",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.0.tgz",
"integrity": "sha512-vSBi1+SrPiLZCGvxpiZIa28fMEUaMjXtCplrvxcIxGzmFiYdsXQDwInEjuv5/i/2CTTxbkS87tE8lsQ0Qxinbw==",
"version": "7.32.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz",
"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",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
"integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
"version": "8.32.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
"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",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
"integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
"version": "0.3.7",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
"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",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
"integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
"version": "2.27.5",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
"integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
"requires": {
"array-includes": "^3.1.4",
"array.prototype.flat": "^1.2.5",
"debug": "^2.6.9",
"array-includes": "^3.1.6",
"array.prototype.flat": "^1.3.1",
"array.prototype.flatmap": "^1.3.1",
"debug": "^3.2.7",
"doctrine": "^2.1.0",
"eslint-import-resolver-node": "^0.3.6",
"eslint-module-utils": "^2.7.3",
"eslint-import-resolver-node": "^0.3.7",
"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",
"resolve": "^1.22.0",
"object.values": "^1.1.6",
"resolve": "^1.22.1",
"semver": "^6.3.0",
"tsconfig-paths": "^3.14.1"
},
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"requires": {
"ms": "2.0.0"
"ms": "^2.1.1"
}
},
"doctrine": {
@ -22995,10 +23162,10 @@
"esutils": "^2.0.2"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
}
}
},
@ -23011,9 +23178,9 @@
}
},
"eslint-plugin-jsx-a11y": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.0.tgz",
"integrity": "sha512-EGGRKhzejSzXKtjmEjWNtr4SK/DkMkSzkBH7g7e7moBDXZXrqaUIxkmD7uF93upMysc4dKYEJwupu7Dff+ShwA==",
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
"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",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.0.tgz",
"integrity": "sha512-vSBi1+SrPiLZCGvxpiZIa28fMEUaMjXtCplrvxcIxGzmFiYdsXQDwInEjuv5/i/2CTTxbkS87tE8lsQ0Qxinbw==",
"version": "7.32.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz",
"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",

11
package.json
View File

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

2
src/App.js
View File

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

42
src/Components/GridComp.jsx
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>
)
}

59
src/Components/GridComp/GridComp.jsx 100644
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>
)
}

56
src/Components/GridComp/GridComp.module.css 100644
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;
}

31
src/Components/HeaderComp/HeaderComp.jsx 100644
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>
)
}

25
src/Components/TestMedia.jsx 100644
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>
// )
// }

10
src/Pages/Main.jsx
View File

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

5
src/css/style.css 100644
View File

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