From 0e4af48cc4e5625c7f9a705760c9cd200a69d749 Mon Sep 17 00:00:00 2001 From: Sidahmed Slikh Date: Wed, 13 Sep 2023 23:30:39 +0200 Subject: [PATCH 01/38] feat(setup gitflow): adds GitFlow to the project & adds a feature branche for a test #3 --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index a020848..bc9cf92 100644 --- a/README.md +++ b/README.md @@ -57,3 +57,5 @@ In times of doubts remember these: - *`I've worked on 3 projects. They seemed difficult in the beginning but I still aced them. I'm awesome!`* - *`3 months ago, my biggest issues and worries are how to write the correct class name to change an HTML element's color. Now, I'm dealing with bigger things because I've learned so much more. My current worries and issues will be my HTML and CSS of my future.`* - *`I'm not alone on this team. There are 2 more people who got my back.`* + + From e0442d7e56e0ddfd758f9a135e25e255e1bb8493 Mon Sep 17 00:00:00 2001 From: aboura Date: Thu, 14 Sep 2023 22:42:44 +0200 Subject: [PATCH 02/38] refactor(component): add a card component add a card component using Material UI #5 --- package-lock.json | 644 +++++++++++++++++++++++++++++++++++++-- package.json | 4 + src/components/Cards.jsx | 32 ++ src/pages/_app.js | 2 - 4 files changed, 651 insertions(+), 31 deletions(-) create mode 100644 src/components/Cards.jsx diff --git a/package-lock.json b/package-lock.json index 5e005c8..0b00ebd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,10 @@ "name": "neocine", "version": "0.1.0", "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.14.9", + "@mui/material": "^5.14.9", "eslint": "8.49.0", "eslint-config-next": "13.4.19", "next": "13.4.19", @@ -35,7 +39,6 @@ "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", - "dev": true, "dependencies": { "@babel/highlight": "^7.22.13", "chalk": "^2.4.2" @@ -48,7 +51,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -60,7 +62,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -74,7 +75,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -82,14 +82,12 @@ "node_modules/@babel/code-frame/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/@babel/code-frame/node_modules/escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -98,7 +96,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -107,7 +104,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -115,11 +111,29 @@ "node": ">=4" } }, + "node_modules/@babel/helper-module-imports": { + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz", + "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==", + "dependencies": { + "@babel/types": "^7.22.15" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", + "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-validator-identifier": { "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz", "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -128,7 +142,6 @@ "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.13.tgz", "integrity": "sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.22.5", "chalk": "^2.4.2", @@ -142,7 +155,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -154,7 +166,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -168,7 +179,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -176,14 +186,12 @@ "node_modules/@babel/highlight/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/@babel/highlight/node_modules/escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -192,7 +200,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -201,7 +208,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -220,6 +226,19 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/types": { + "version": "7.22.17", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.17.tgz", + "integrity": "sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg==", + "dependencies": { + "@babel/helper-string-parser": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.15", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@commitlint/cli": { "version": "17.7.1", "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-17.7.1.tgz", @@ -541,6 +560,139 @@ "node": ">=12" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/react": { + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -593,6 +745,40 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.2.tgz", + "integrity": "sha512-olUakR5nr9v2ueVr1yomoJnBTkHGqHzL/iK4AhforiJS/wKJgFphAYpZHZzADLv/zNUFuQwqLH3bcoUhFh2E1Q==", + "dependencies": { + "@floating-ui/utils": "^0.1.3" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "dependencies": { + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", + "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", + "dependencies": { + "@floating-ui/dom": "^1.5.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.3.tgz", + "integrity": "sha512-uvnFKtPgzLnpzzTRfhDlvXX0kLYi9lDRQbcDmT8iXl71Rx+uwSuaUIQl3DNC7w5OweAQ7XQMDObML+KaYDQfng==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.11", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", @@ -648,6 +834,262 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.15", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.15.tgz", + "integrity": "sha512-Xtom3YSdi0iwYPtyVRFUEGoRwi6IHWixPwifDKaK+4PkEPtUWMU5YOIJfTsmC59ri+dFvA3oBNSiTPUGGrklZw==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@floating-ui/react-dom": "^2.0.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.9", + "@popperjs/core": "^2.11.8", + "clsx": "^2.0.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.9.tgz", + "integrity": "sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + } + }, + "node_modules/@mui/icons-material": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.9.tgz", + "integrity": "sha512-xTRQbDsogsJo7tY5Og8R9zbuG2q+KIPVIM6JQoKxtJlz9DPOw1u0T2fGrvwD+XAOVifQf6epNMcGCDLfJAz4Nw==", + "dependencies": { + "@babel/runtime": "^7.22.15" + }, + "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.14.9", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.9.tgz", + "integrity": "sha512-pbBy5kc5iUGXPxgbb+t+yEPvLK5nE3bPUb8WbAafJ8iZ40ZGui0xC4xiiIyzbVexzsLmyN7MaSo4LkxLmPKqUQ==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@mui/base": "5.0.0-beta.15", + "@mui/core-downloads-tracker": "^5.14.9", + "@mui/system": "^5.14.9", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.9", + "@types/react-transition-group": "^4.4.6", + "clsx": "^2.0.0", + "csstype": "^3.1.2", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@mui/private-theming": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.9.tgz", + "integrity": "sha512-0PzoUFqFXTXiNchhR7K4b7kZunasPOjx6Qf7AagCmfZDNASHedA0x6evHVhnST918x/AHY9xykYNKfB0Z4xMBg==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@mui/utils": "^5.14.9", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.9.tgz", + "integrity": "sha512-LEQxLrW9oWvea33pge08+oyNeTz704jb6Nhe26xEJKojXWd34Rr327Zzx3dmo70AcS4h0b99vQjEpUzm6ASqUw==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.2", + "prop-types": "^15.8.1", + "react": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.9.tgz", + "integrity": "sha512-Z00Wj590QXk5+SIxmxayBo7SWrao+y433LKGChneJxO4QcT/caSCeEWtyeoLs1Q8ys0zOzl2kkKee6n8TaKzhQ==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@mui/private-theming": "^5.14.9", + "@mui/styled-engine": "^5.14.9", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.9", + "clsx": "^2.0.0", + "csstype": "^3.1.2", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz", + "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==", + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.9.tgz", + "integrity": "sha512-9ysB5e+RwS7ofn0n3nwAg1/3c81vBTmSvauD3EuK9LmqMzhmF//BFDaC44U4yITvB/0m1kWyDqg924Ll3VHCcg==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/@next/env": { "version": "13.4.19", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.19.tgz", @@ -828,6 +1270,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz", @@ -888,6 +1339,39 @@ "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==", "dev": true }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" + }, + "node_modules/@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==" + }, + "node_modules/@types/react": { + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", + "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "node_modules/@typescript-eslint/parser": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.0.tgz", @@ -1282,6 +1766,43 @@ "dequal": "^2.0.3" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/babel-plugin-macros/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/babel-plugin-macros/node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "engines": { + "node": ">= 6" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1589,6 +2110,14 @@ "node": ">=0.8" } }, + "node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1751,6 +2280,11 @@ "node": ">=14" } }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, "node_modules/cosmiconfig": { "version": "8.3.5", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.5.tgz", @@ -1811,6 +2345,11 @@ "node": ">= 8" } }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/cz-conventional-changelog": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz", @@ -2061,6 +2600,15 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dot-prop": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", @@ -2100,7 +2648,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, "dependencies": { "is-arrayish": "^0.2.1" } @@ -2791,8 +3338,7 @@ "node_modules/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", - "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", - "dev": true + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, "node_modules/find-up": { "version": "5.0.0", @@ -3220,6 +3766,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -3415,8 +3969,7 @@ "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", - "dev": true + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" }, "node_modules/is-async-function": { "version": "2.0.0", @@ -3826,8 +4379,7 @@ "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, "node_modules/json-schema-traverse": { "version": "0.4.1", @@ -3955,8 +4507,7 @@ "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "dev": true + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, "node_modules/lint-staged": { "version": "14.0.1", @@ -4963,7 +5514,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -5171,6 +5721,21 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -5688,6 +6253,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -5916,6 +6489,11 @@ } } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -5987,6 +6565,14 @@ "node": ">=0.6.0" } }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "engines": { + "node": ">=4" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/package.json b/package.json index 3126dcb..b2a9a6b 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,10 @@ "prepare": "husky install" }, "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.14.9", + "@mui/material": "^5.14.9", "eslint": "8.49.0", "eslint-config-next": "13.4.19", "next": "13.4.19", diff --git a/src/components/Cards.jsx b/src/components/Cards.jsx new file mode 100644 index 0000000..11a3c50 --- /dev/null +++ b/src/components/Cards.jsx @@ -0,0 +1,32 @@ +import * as React from "react" +import Card from "@mui/material/Card" +import CardActions from "@mui/material/CardActions" +import CardContent from "@mui/material/CardContent" +import CardMedia from "@mui/material/CardMedia" +import Button from "@mui/material/Button" +import Typography from "@mui/material/Typography" + +export default function Cards({ title, overview, poster_path }) { + const images = `https://image.tmdb.org/t/p/original${poster_path}` + return ( + + + + + {title} + + + {overview} + + + + + + + ) +} diff --git a/src/pages/_app.js b/src/pages/_app.js index 63b9c71..cf06318 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,5 +1,3 @@ -import "@/styles/globals.css" - export default function App({ Component, pageProps }) { return } From d90c9f3d8ddecb1701655d3421466764a76cb58b Mon Sep 17 00:00:00 2001 From: Sidahmed Slikh Date: Thu, 14 Sep 2023 23:43:18 +0200 Subject: [PATCH 03/38] feat(api-utility): create API utility for Organized API Requests fix #9 --- package-lock.json | 625 ++++++++++++++++++++++++++++++++++++++++++--- package.json | 4 + src/pages/index.js | 120 ++------- util/API.js | 13 + 4 files changed, 629 insertions(+), 133 deletions(-) create mode 100644 util/API.js diff --git a/package-lock.json b/package-lock.json index 5e005c8..34abad4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,10 @@ "name": "neocine", "version": "0.1.0", "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@mui/material": "^5.14.9", + "@mui/system": "^5.14.9", "eslint": "8.49.0", "eslint-config-next": "13.4.19", "next": "13.4.19", @@ -35,7 +39,6 @@ "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", - "dev": true, "dependencies": { "@babel/highlight": "^7.22.13", "chalk": "^2.4.2" @@ -48,7 +51,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -60,7 +62,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -74,7 +75,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -82,14 +82,12 @@ "node_modules/@babel/code-frame/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/@babel/code-frame/node_modules/escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -98,7 +96,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -107,7 +104,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -115,11 +111,29 @@ "node": ">=4" } }, - "node_modules/@babel/helper-validator-identifier": { + "node_modules/@babel/helper-module-imports": { "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz", - "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==", - "dev": true, + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz", + "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==", + "dependencies": { + "@babel/types": "^7.22.15" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", + "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.22.19", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.19.tgz", + "integrity": "sha512-Tinq7ybnEPFFXhlYOYFiSjespWQk0dq2dRNAiMdRTOYQzEGqnnNyrTxPYHP5r6wGjlF1rFgABdDV0g8EwD6Qbg==", "engines": { "node": ">=6.9.0" } @@ -128,7 +142,6 @@ "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.13.tgz", "integrity": "sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.22.5", "chalk": "^2.4.2", @@ -142,7 +155,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -154,7 +166,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -168,7 +179,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -176,14 +186,12 @@ "node_modules/@babel/highlight/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/@babel/highlight/node_modules/escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -192,7 +200,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -201,7 +208,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -220,6 +226,19 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/types": { + "version": "7.22.19", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.19.tgz", + "integrity": "sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==", + "dependencies": { + "@babel/helper-string-parser": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.19", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@commitlint/cli": { "version": "17.7.1", "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-17.7.1.tgz", @@ -541,6 +560,139 @@ "node": ">=12" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/react": { + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -593,6 +745,40 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.2.tgz", + "integrity": "sha512-olUakR5nr9v2ueVr1yomoJnBTkHGqHzL/iK4AhforiJS/wKJgFphAYpZHZzADLv/zNUFuQwqLH3bcoUhFh2E1Q==", + "dependencies": { + "@floating-ui/utils": "^0.1.3" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "dependencies": { + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", + "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", + "dependencies": { + "@floating-ui/dom": "^1.5.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.3.tgz", + "integrity": "sha512-uvnFKtPgzLnpzzTRfhDlvXX0kLYi9lDRQbcDmT8iXl71Rx+uwSuaUIQl3DNC7w5OweAQ7XQMDObML+KaYDQfng==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.11", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", @@ -648,6 +834,237 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.15", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.15.tgz", + "integrity": "sha512-Xtom3YSdi0iwYPtyVRFUEGoRwi6IHWixPwifDKaK+4PkEPtUWMU5YOIJfTsmC59ri+dFvA3oBNSiTPUGGrklZw==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@floating-ui/react-dom": "^2.0.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.9", + "@popperjs/core": "^2.11.8", + "clsx": "^2.0.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.9.tgz", + "integrity": "sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + } + }, + "node_modules/@mui/material": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.9.tgz", + "integrity": "sha512-pbBy5kc5iUGXPxgbb+t+yEPvLK5nE3bPUb8WbAafJ8iZ40ZGui0xC4xiiIyzbVexzsLmyN7MaSo4LkxLmPKqUQ==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@mui/base": "5.0.0-beta.15", + "@mui/core-downloads-tracker": "^5.14.9", + "@mui/system": "^5.14.9", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.9", + "@types/react-transition-group": "^4.4.6", + "clsx": "^2.0.0", + "csstype": "^3.1.2", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@mui/private-theming": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.9.tgz", + "integrity": "sha512-0PzoUFqFXTXiNchhR7K4b7kZunasPOjx6Qf7AagCmfZDNASHedA0x6evHVhnST918x/AHY9xykYNKfB0Z4xMBg==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@mui/utils": "^5.14.9", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.9.tgz", + "integrity": "sha512-LEQxLrW9oWvea33pge08+oyNeTz704jb6Nhe26xEJKojXWd34Rr327Zzx3dmo70AcS4h0b99vQjEpUzm6ASqUw==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.2", + "prop-types": "^15.8.1", + "react": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.9.tgz", + "integrity": "sha512-Z00Wj590QXk5+SIxmxayBo7SWrao+y433LKGChneJxO4QcT/caSCeEWtyeoLs1Q8ys0zOzl2kkKee6n8TaKzhQ==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@mui/private-theming": "^5.14.9", + "@mui/styled-engine": "^5.14.9", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.9", + "clsx": "^2.0.0", + "csstype": "^3.1.2", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz", + "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==", + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.9.tgz", + "integrity": "sha512-9ysB5e+RwS7ofn0n3nwAg1/3c81vBTmSvauD3EuK9LmqMzhmF//BFDaC44U4yITvB/0m1kWyDqg924Ll3VHCcg==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/@next/env": { "version": "13.4.19", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.19.tgz", @@ -828,6 +1245,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz", @@ -888,6 +1314,39 @@ "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==", "dev": true }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" + }, + "node_modules/@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==" + }, + "node_modules/@types/react": { + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", + "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "node_modules/@typescript-eslint/parser": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.0.tgz", @@ -1282,6 +1741,43 @@ "dequal": "^2.0.3" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/babel-plugin-macros/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/babel-plugin-macros/node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "engines": { + "node": ">= 6" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1589,6 +2085,14 @@ "node": ">=0.8" } }, + "node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1751,6 +2255,11 @@ "node": ">=14" } }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, "node_modules/cosmiconfig": { "version": "8.3.5", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.5.tgz", @@ -1811,6 +2320,11 @@ "node": ">= 8" } }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/cz-conventional-changelog": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz", @@ -2061,6 +2575,15 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dot-prop": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", @@ -2100,7 +2623,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, "dependencies": { "is-arrayish": "^0.2.1" } @@ -2791,8 +3313,7 @@ "node_modules/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", - "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", - "dev": true + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, "node_modules/find-up": { "version": "5.0.0", @@ -3220,6 +3741,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -3415,8 +3944,7 @@ "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", - "dev": true + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" }, "node_modules/is-async-function": { "version": "2.0.0", @@ -3826,8 +4354,7 @@ "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, "node_modules/json-schema-traverse": { "version": "0.4.1", @@ -3955,8 +4482,7 @@ "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "dev": true + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, "node_modules/lint-staged": { "version": "14.0.1", @@ -4963,7 +5489,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -5171,6 +5696,21 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -5688,6 +6228,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -5916,6 +6464,11 @@ } } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -5987,6 +6540,14 @@ "node": ">=0.6.0" } }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "engines": { + "node": ">=4" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/package.json b/package.json index 3126dcb..da317bf 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,10 @@ "prepare": "husky install" }, "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@mui/material": "^5.14.9", + "@mui/system": "^5.14.9", "eslint": "8.49.0", "eslint-config-next": "13.4.19", "next": "13.4.19", diff --git a/src/pages/index.js b/src/pages/index.js index 2dd9f18..67ca358 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,111 +1,29 @@ import Head from "next/head" import Image from "next/image" import styles from "@/styles/Home.module.css" +import Cards from "@/component/Card/Cards" +import { fetcher } from "../../util/API" -export default function Home() { +export default function Home({ latestMovie }) { return ( <> - - Create Next App - - - - -
-
+ ) + })} ) } + +export async function getStaticProps() { + const data = await fetcher("trending/movie/day?language=en-US") + + return { + props: { + latestMovie: data, + }, + } +} diff --git a/util/API.js b/util/API.js new file mode 100644 index 0000000..5d8f017 --- /dev/null +++ b/util/API.js @@ -0,0 +1,13 @@ +export async function fetcher(apiRoute) { + const url = "https://api.themoviedb.org/3/" + apiRoute + const options = { + headers: { + accept: "application/json", + Authorization: + "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2MThmNTFkMjdhMjczNzk4YmE4MDVjMjQ2Y2YzMDhmMyIsInN1YiI6IjY1MDMwZjRmZTBjYTdmMDBhZTQwNjRmZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.x8yx_DbvpkN6H83lLCes9R22Np8Vf5gEZehbJ7TW6ZU", + }, + } + const response = await fetch(url, options) + const data = await response.json() + return data +} From a1d8da3224a06646c8dce55f28e6a8ceda967402 Mon Sep 17 00:00:00 2001 From: Youssouf Sergma Date: Sat, 16 Sep 2023 00:55:05 +0100 Subject: [PATCH 04/38] feat(component): add moviescredits component add moviescredits component to the actor page --- package-lock.json | 6 ----- src/components/Moviescredits.js | 39 +++++++++++++++++++++++++++++++++ src/pages/index.js | 5 +++-- 3 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 src/components/Moviescredits.js diff --git a/package-lock.json b/package-lock.json index 284999a..f1fd8c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -113,7 +113,6 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz", "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==", @@ -136,7 +135,6 @@ "version": "7.22.19", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.19.tgz", "integrity": "sha512-Tinq7ybnEPFFXhlYOYFiSjespWQk0dq2dRNAiMdRTOYQzEGqnnNyrTxPYHP5r6wGjlF1rFgABdDV0g8EwD6Qbg==", - "engines": { "node": ">=6.9.0" } @@ -230,14 +228,12 @@ } }, "node_modules/@babel/types": { - "version": "7.22.19", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.19.tgz", "integrity": "sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==", "dependencies": { "@babel/helper-string-parser": "^7.22.5", "@babel/helper-validator-identifier": "^7.22.19", - "to-fast-properties": "^2.0.0" }, "engines": { @@ -879,7 +875,6 @@ "url": "https://opencollective.com/mui" } }, - "node_modules/@mui/icons-material": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.9.tgz", @@ -905,7 +900,6 @@ } } }, - "node_modules/@mui/material": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.9.tgz", diff --git a/src/components/Moviescredits.js b/src/components/Moviescredits.js new file mode 100644 index 0000000..32c5772 --- /dev/null +++ b/src/components/Moviescredits.js @@ -0,0 +1,39 @@ +import React, { useState, useEffect } from "react" +import { fetcher } from "../../util/API" +import Cards from "../components/Cards" + +const Moviescredits = ({ actor_id }) => { + const [credits, setCredits] = useState([]) + const apiRoute = `person/88/movie_credits?language=en-US ` + const fetchCredits = async () => { + const data = await fetcher(apiRoute) + console.log(data.cast) + setCredits(data.cast) + } + useEffect(() => { + fetchCredits() + }, []) + { + if (credits) { + return ( +
+

Similar movies

+ {credits.map((credit, index) => ( +
+ {credit.title} + +
+ ))} +
+ ) + } else { + return "" + } + } +} + +export default Moviescredits diff --git a/src/pages/index.js b/src/pages/index.js index 67ca358..280ffd1 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,8 +1,9 @@ import Head from "next/head" import Image from "next/image" import styles from "@/styles/Home.module.css" -import Cards from "@/component/Card/Cards" +import Cards from "../components/Cards" import { fetcher } from "../../util/API" +import Moviescredits from "../components/Moviescredits" export default function Home({ latestMovie }) { return ( @@ -14,13 +15,13 @@ export default function Home({ latestMovie }) { ) })} + ) } export async function getStaticProps() { const data = await fetcher("trending/movie/day?language=en-US") - return { props: { latestMovie: data, From 48a797185f1337b9ed24f2b72ded7cb52b9fe68b Mon Sep 17 00:00:00 2001 From: Youssouf Sergma Date: Sat, 16 Sep 2023 01:38:41 +0100 Subject: [PATCH 05/38] feat(component): add Tv credits to the actors page add Tv credits to the actors page(this shows other tv shows of the same actor) "fix #6" --- README.md | 22 ++++++++++----------- Requirements.md | 18 ++++++++--------- Score-guide.md | 2 +- Setup.md | 11 +++++++---- package.json | 2 -- src/components/Tvcredits.js | 39 +++++++++++++++++++++++++++++++++++++ src/pages/index.js | 3 ++- 7 files changed, 68 insertions(+), 29 deletions(-) create mode 100644 src/components/Tvcredits.js diff --git a/README.md b/README.md index bc9cf92..6579095 100644 --- a/README.md +++ b/README.md @@ -42,20 +42,18 @@ You will be able to practice: The following thoughts are traps; steer away from them: -- *`This project is huge! I don't think I'm going to be able to do it.`* From your previous experiences, you know for a fact that everything starts big in the beginning but when you plan things and work on them they usually are not as big and scary as you thought. -- *`I don't know how to use [insert tool here] how am I going to deal with all of this?`* Again, don't worry. You have dealt with so many unknown things and just like you learned how to use them, you will be able to learn how to use any tool you want as long as you check its documentation. -- *`[Right from the beginning] How am I going to fix the bonus topic?`* DON'T GO THERE UNLESS YOU FINISH THE MAIN REQUIREMENTS FIRST! -- *`[After spending hours on an issue to fix it without reading the documentation or searching the issue on google] I will spend extra hours on this until I fix it`* This is a trap. You should always read the documentation and search for the solution. -- *`I'm so tired now!!!😩 I've been trying to fix this bug for 3 hours!!!`* In times like these, consider steping away from your computer and doing something else like playing with your pet, watching something funny, looking outside your window and enjoying cool air. +- _`This project is huge! I don't think I'm going to be able to do it.`_ From your previous experiences, you know for a fact that everything starts big in the beginning but when you plan things and work on them they usually are not as big and scary as you thought. +- _`I don't know how to use [insert tool here] how am I going to deal with all of this?`_ Again, don't worry. You have dealt with so many unknown things and just like you learned how to use them, you will be able to learn how to use any tool you want as long as you check its documentation. +- _`[Right from the beginning] How am I going to fix the bonus topic?`_ DON'T GO THERE UNLESS YOU FINISH THE MAIN REQUIREMENTS FIRST! +- _`[After spending hours on an issue to fix it without reading the documentation or searching the issue on google] I will spend extra hours on this until I fix it`_ This is a trap. You should always read the documentation and search for the solution. +- _`I'm so tired now!!!😩 I've been trying to fix this bug for 3 hours!!!`_ In times like these, consider steping away from your computer and doing something else like playing with your pet, watching something funny, looking outside your window and enjoying cool air. #### Confidence boosters In times of doubts remember these: -- *`This project will be a huge addition to my already big list of projects that will increase my future prospects of getting hired`* -- *`The internet is FULL of resources that any one can use to learn about anything.`* -- *`I've worked on 3 projects. They seemed difficult in the beginning but I still aced them. I'm awesome!`* -- *`3 months ago, my biggest issues and worries are how to write the correct class name to change an HTML element's color. Now, I'm dealing with bigger things because I've learned so much more. My current worries and issues will be my HTML and CSS of my future.`* -- *`I'm not alone on this team. There are 2 more people who got my back.`* - - +- _`This project will be a huge addition to my already big list of projects that will increase my future prospects of getting hired`_ +- _`The internet is FULL of resources that any one can use to learn about anything.`_ +- _`I've worked on 3 projects. They seemed difficult in the beginning but I still aced them. I'm awesome!`_ +- _`3 months ago, my biggest issues and worries are how to write the correct class name to change an HTML element's color. Now, I'm dealing with bigger things because I've learned so much more. My current worries and issues will be my HTML and CSS of my future.`_ +- _`I'm not alone on this team. There are 2 more people who got my back.`_ diff --git a/Requirements.md b/Requirements.md index 37d9fde..811e980 100644 --- a/Requirements.md +++ b/Requirements.md @@ -50,12 +50,12 @@ Your website need to have the following pages: 7. Director's name 8. Overview of the movie 9. The main 5 actors of the movies in the credit section (Use the API for this) - 10. A related movies section which includes at least five related movies (Use the API for this) + 10. A related movies section which includes at least five related movies (Use the API for this) 11. A trailer section that has the movie trailer from youtube 12. The movie production company name and logo. 2. Functionality: - 1. Clicking an actor in the main actors should go to the single actor page. - 2. Clicking on a movie in the related movies section should take you to the Single movie page (#3) + 1. Clicking an actor in the main actors should go to the single actor page. + 2. Clicking on a movie in the related movies section should take you to the Single movie page (#3) 4. Actors page - Shows a list of all popular actors. Clicking on an actor takes you to the Single actors page (#5) 5. Single actors page - Shows information about the current actor. 1. The information includes: @@ -92,7 +92,7 @@ src/ │ ├─ index.jsx // Home page │ ├─ movies/ │ ├─ index.jsx // Movies page -│ ├─ [movieId].jsx // Single movie page +│ ├─ [movieId].jsx // Single movie page ├─ components/ │ ├─ Navbar/ │ ├─ Navbar.jsx @@ -169,8 +169,8 @@ After finishing the project, do the following: 1. Deploy the project on netlify so you can have a link to use it in your portfolio. Don't forget to add a link in your website that points to this project. 2. Remove everything from this README.md file and add the following content to it: - 1. A screenshot of the website. - 2. Your project's name. - 3. Description of the project. - 4. Tools used. - 5. Your names. + 1. A screenshot of the website. + 2. Your project's name. + 3. Description of the project. + 4. Tools used. + 5. Your names. diff --git a/Score-guide.md b/Score-guide.md index 6264f43..a0d8150 100644 --- a/Score-guide.md +++ b/Score-guide.md @@ -3,7 +3,7 @@ This project will be graded. We will follow the following score guide so keep it in mind. | Criteria | Score | -|---------------------------------------------|-------| +| ------------------------------------------- | ----- | | Project Requirements | 3 | | Used Github issues correctly | 1 | | Used Github PRs correctly (Github workflow) | 1 | diff --git a/Setup.md b/Setup.md index 5356ca9..07e68cb 100644 --- a/Setup.md +++ b/Setup.md @@ -46,7 +46,7 @@ Create a new file called `.prettierrc.js` in the root folder and put the followi module.exports = { semi: false, singleQuote: false, // Do you want to use double or single quotations? - trailingComma: 'all', + trailingComma: "all", } ``` @@ -91,7 +91,7 @@ npx lint-staged Now run `npm run prepare` that we created previously to initialize the new changes we created. -### 4. [Commitizen](https://github.com/commitizen/cz-cli) + [Commitlint]() [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) +### 4. [Commitizen](https://github.com/commitizen/cz-cli) + [Commitlint]() [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) Commitizen and Conventional Commits are used to force correct code commit messages in the project. Commitizen is the tool while Conventional commits is the standard while Commitlint is a tool used to enforce that you follow the conventions. @@ -128,7 +128,8 @@ npm install --save-dev @commitlint/{config-conventional,cli} npm install --save-dev @commitlint/config-conventional @commitlint/cli ``` -Create configuration file with the following command +Create configuration file with the following command + ``` echo "module.exports = { extends: ['@commitlint/config-conventional'], @@ -156,7 +157,9 @@ echo "module.exports = { }, };" > commitlint.config.js ``` + Now let's finalize this by adding the precommit message + ``` npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}' ``` @@ -208,4 +211,4 @@ Now go to `.eslintrc.json` and add change it to Now run `npm run dev` your project should be ready. -If everything is running correctly, let's create our first commit using `git cz` then choose `chore` by going down the list and add the scope `project structure` and small short message that explains what you did. Press enter to leave the longer description empty (if you want) \ No newline at end of file +If everything is running correctly, let's create our first commit using `git cz` then choose `chore` by going down the list and add the scope `project structure` and small short message that explains what you did. Press enter to leave the longer description empty (if you want) diff --git a/package.json b/package.json index a94c045..90194cd 100644 --- a/package.json +++ b/package.json @@ -14,11 +14,9 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.14.9", "@mui/material": "^5.14.9", "@mui/system": "^5.14.9", - "eslint": "8.49.0", "eslint-config-next": "13.4.19", "next": "13.4.19", diff --git a/src/components/Tvcredits.js b/src/components/Tvcredits.js new file mode 100644 index 0000000..9b1145e --- /dev/null +++ b/src/components/Tvcredits.js @@ -0,0 +1,39 @@ +import React, { useState, useEffect } from "react" +import { fetcher } from "../../util/API" +import Cards from "../components/Cards" + +const Tvcredits = ({ actor_id }) => { + const [credits, setCredits] = useState([]) + const apiRoute = `person/${actor_id}/tv_credits?language=en-US ` + const fetchCredits = async () => { + const data = await fetcher(apiRoute) + console.log(data.cast) + setCredits(data.cast) + } + useEffect(() => { + fetchCredits() + }, []) + { + if (credits) { + return ( +
+

Similar Tv Shows

+ {credits.map((credit, index) => ( +
+ {credit.title} + +
+ ))} +
+ ) + } else { + return "" + } + } +} + +export default Tvcredits diff --git a/src/pages/index.js b/src/pages/index.js index 280ffd1..37d723a 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -4,6 +4,7 @@ import styles from "@/styles/Home.module.css" import Cards from "../components/Cards" import { fetcher } from "../../util/API" import Moviescredits from "../components/Moviescredits" +import Tvcredits from "../components/Tvcredits" export default function Home({ latestMovie }) { return ( @@ -15,7 +16,7 @@ export default function Home({ latestMovie }) { ) })} - + ) } From be2e8d12a6545fb500ef4aa5d2963d6e93619d34 Mon Sep 17 00:00:00 2001 From: Youssouf Sergma Date: Sat, 16 Sep 2023 13:19:42 +0100 Subject: [PATCH 06/38] feat(component): add searchbar feature which returns an array of searhresults "fix #15" --- src/components/Searchbar.js | 42 +++++++++++++++++++++++++++++++++++++ src/components/Tvcredits.js | 2 +- src/pages/index.js | 2 ++ 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 src/components/Searchbar.js diff --git a/src/components/Searchbar.js b/src/components/Searchbar.js new file mode 100644 index 0000000..ae04868 --- /dev/null +++ b/src/components/Searchbar.js @@ -0,0 +1,42 @@ +import { InputAdornment, TextField } from "@mui/material" +import IconButton from "@mui/material/IconButton" +import React, { useState, useEffect } from "react" +import SearchIcon from "@mui/icons-material/Search" +import { fetcher } from "../../util/API" + +export default function SearchBar() { + const [searchTerm, setSearchTerm] = useState("") + const [searchresults, setSearchResults] = useState("") + + const handleChange = (event) => { + setSearchTerm(event.target.value) + } + const apiRoute = `search/movie?query=${searchTerm}&include_adult=false&language=en-US` + const searchMovie = async (e) => { + e.preventDefault() + const data = await fetcher(apiRoute) + setSearchResults(data.results) + } + + return ( +
+ + + + + + ), + }} + /> + + ) +} diff --git a/src/components/Tvcredits.js b/src/components/Tvcredits.js index 9b1145e..0b40b2f 100644 --- a/src/components/Tvcredits.js +++ b/src/components/Tvcredits.js @@ -4,7 +4,7 @@ import Cards from "../components/Cards" const Tvcredits = ({ actor_id }) => { const [credits, setCredits] = useState([]) - const apiRoute = `person/${actor_id}/tv_credits?language=en-US ` + const apiRoute = `person/${actor_id}/tv_credits?language=en-US` const fetchCredits = async () => { const data = await fetcher(apiRoute) console.log(data.cast) diff --git a/src/pages/index.js b/src/pages/index.js index 37d723a..510d79f 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,10 +5,12 @@ import Cards from "../components/Cards" import { fetcher } from "../../util/API" import Moviescredits from "../components/Moviescredits" import Tvcredits from "../components/Tvcredits" +import Searchbar from "../components/Searchbar" export default function Home({ latestMovie }) { return ( <> + {latestMovie.results.map((movie, index) => { return (
From d52806fa634c6c9a64d0064a5b693840a10f864d Mon Sep 17 00:00:00 2001 From: melissasidisid Date: Sat, 16 Sep 2023 14:06:51 +0100 Subject: [PATCH 07/38] feat(footer): names and Links #7 --- src/components/footer.jsx | 83 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 src/components/footer.jsx diff --git a/src/components/footer.jsx b/src/components/footer.jsx new file mode 100644 index 0000000..06b1497 --- /dev/null +++ b/src/components/footer.jsx @@ -0,0 +1,83 @@ +import react from "react" +import * as React from "react" +import { GitHub } from "@mui/icons-material" +import { fontSize } from "@mui/system" + +/*the page content/ +/1-this is the logo section it contains the logo , +2- the member Names sectiond, +3-this part contains the LinkedIn links +4- this part contains the Github links +5-this last contains the link to our repository*/ + +export default function Footer() { + ;<> + +

Video

+

Video

+

© luxi theme 2020

+

Team

+

+ Benarba Tawfik +

+

+ imane omari +

+

+ Sidahmed slikh +

+

+ Youssef sergma +

+

+ Bouchra ikram aboura +

+

+ Melissa Sidi Said +

+ +

LinkedIn

+

+ Benarba Tawfik +

+

+ imane omari +

+

+ Sidahmed slikh +

+

+ Youssef sergma +

+

+ Bouchra ikram aboura +

+

+ Melissa Sidi Said +

+ +

Github

+ +

+ Benarba Tawfik +

+

+ imane omari +

+

+ Sidahmed slikh +

+

+ Youssef sergma +

+

+ Bouchra ikram aboura +

+

+ Melissa Sidi Said +

+ + +

Github Repo

+ +} From b99806cd0ea0f2e7fbe380c676dea96590c59980 Mon Sep 17 00:00:00 2001 From: benarba mohammed Date: Sat, 16 Sep 2023 18:07:55 +0200 Subject: [PATCH 08/38] feat(create navbar): create Navbar Navbar contain logo genres and movies list and search box #8 --- public/logo.svg | 10 + src/components/GenresList.jsx | 102 +++++++++ src/components/MoviesList.jsx | 103 ++++++++++ .../{Moviescredits.js => Moviescredits.jsx} | 2 +- src/components/Navbar.jsx | 193 ++++++++++++++++++ .../{Searchbar.js => Searchbar.jsx} | 0 .../{Tvcredits.js => Tvcredits.jsx} | 2 +- src/pages/_document.js | 1 + src/pages/index.js | 9 +- src/styles/globals.css | 106 +--------- 10 files changed, 421 insertions(+), 107 deletions(-) create mode 100644 public/logo.svg create mode 100644 src/components/GenresList.jsx create mode 100644 src/components/MoviesList.jsx rename src/components/{Moviescredits.js => Moviescredits.jsx} (95%) create mode 100644 src/components/Navbar.jsx rename src/components/{Searchbar.js => Searchbar.jsx} (100%) rename src/components/{Tvcredits.js => Tvcredits.jsx} (95%) diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..43ed7c2 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/GenresList.jsx b/src/components/GenresList.jsx new file mode 100644 index 0000000..e68100e --- /dev/null +++ b/src/components/GenresList.jsx @@ -0,0 +1,102 @@ +import * as React from "react" +import { styled, alpha } from "@mui/material/styles" +import Button from "@mui/material/Button" +import Menu from "@mui/material/Menu" +import MenuItem from "@mui/material/MenuItem" +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown" + +const StyledMenu = styled((props) => ( + +))(({ theme }) => ({ + "& .MuiPaper-root": { + borderRadius: 6, + marginTop: theme.spacing(1), + minWidth: 180, + color: + theme.palette.mode === "light" + ? "rgb(55, 65, 81)" + : theme.palette.grey[300], + boxShadow: + "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px", + "& .MuiMenu-list": { + padding: "4px 0", + }, + "& .MuiMenuItem-root": { + "& .MuiSvgIcon-root": { + fontSize: 18, + color: theme.palette.text.secondary, + marginRight: theme.spacing(1.5), + }, + "&:active": { + backgroundColor: alpha( + theme.palette.primary.main, + theme.palette.action.selectedOpacity, + ), + }, + }, + }, +})) + +export default function GenresList({ movieGernresList }) { + const [anchorEl, setAnchorEl] = React.useState(null) + const open = Boolean(anchorEl) + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + const handleClose = () => { + setAnchorEl(null) + } + + return ( +
+ + + {movieGernresList.map((movie) => { + console.log(movie) + return ( + + {movie.name} + + ) + })} + +
+ ) +} diff --git a/src/components/MoviesList.jsx b/src/components/MoviesList.jsx new file mode 100644 index 0000000..af9c05f --- /dev/null +++ b/src/components/MoviesList.jsx @@ -0,0 +1,103 @@ +import * as React from "react" +import { styled, alpha } from "@mui/material/styles" +import Button from "@mui/material/Button" +import Menu from "@mui/material/Menu" +import MenuItem from "@mui/material/MenuItem" +import EditIcon from "@mui/icons-material/Edit" +import Divider from "@mui/material/Divider" +import ArchiveIcon from "@mui/icons-material/Archive" +import FileCopyIcon from "@mui/icons-material/FileCopy" +import MoreHorizIcon from "@mui/icons-material/MoreHoriz" +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown" + +const StyledMenu = styled((props) => ( + +))(({ theme }) => ({ + "& .MuiPaper-root": { + borderRadius: 6, + marginTop: theme.spacing(1), + minWidth: 180, + color: + theme.palette.mode === "light" + ? "rgb(55, 65, 81)" + : theme.palette.grey[300], + boxShadow: + "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px", + "& .MuiMenu-list": { + padding: "4px 0", + }, + "& .MuiMenuItem-root": { + "& .MuiSvgIcon-root": { + fontSize: 18, + color: theme.palette.text.secondary, + marginRight: theme.spacing(1.5), + }, + "&:active": { + backgroundColor: alpha( + theme.palette.primary.main, + theme.palette.action.selectedOpacity, + ), + }, + }, + }, +})) + +export function MoviesList() { + const [anchorEl, setAnchorEl] = React.useState(null) + const open = Boolean(anchorEl) + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + const handleClose = () => { + setAnchorEl(null) + } + + return ( +
+ + + + + Edit + + +
+ ) +} diff --git a/src/components/Moviescredits.js b/src/components/Moviescredits.jsx similarity index 95% rename from src/components/Moviescredits.js rename to src/components/Moviescredits.jsx index 32c5772..79c5887 100644 --- a/src/components/Moviescredits.js +++ b/src/components/Moviescredits.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react" import { fetcher } from "../../util/API" -import Cards from "../components/Cards" +import Cards from "./Cards" const Moviescredits = ({ actor_id }) => { const [credits, setCredits] = useState([]) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx new file mode 100644 index 0000000..c68d4e2 --- /dev/null +++ b/src/components/Navbar.jsx @@ -0,0 +1,193 @@ +import * as React from "react" +import { styled, alpha } from "@mui/material/styles" +import AppBar from "@mui/material/AppBar" +import Box from "@mui/material/Box" +import Toolbar from "@mui/material/Toolbar" +import InputBase from "@mui/material/InputBase" +import SearchIcon from "@mui/icons-material/Search" +import Button from "@mui/material/Button" +import Menu from "@mui/material/Menu" +import MenuItem from "@mui/material/MenuItem" +import EditIcon from "@mui/icons-material/Edit" +import Divider from "@mui/material/Divider" +import ArchiveIcon from "@mui/icons-material/Archive" +import FileCopyIcon from "@mui/icons-material/FileCopy" +import MoreHorizIcon from "@mui/icons-material/MoreHoriz" +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown" +import IconButton from "@mui/material/IconButton" +// import MenuIcon from "@mui/icons-material/Menu" +import Typography from "@mui/material/Typography" +// import Stack from "@mui/material/Stack" +import Image from "next/image" +import GernresList from "./GenresList" +import { MoviesList } from "./MoviesList" + +// search component +const Search = styled("div")(({ theme }) => ({ + position: "relative", + borderRadius: theme.shape.borderRadius, + backgroundColor: alpha(theme.palette.common.white, 0.15), + "&:hover": { + backgroundColor: alpha(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: "100%", + [theme.breakpoints.up("sm")]: { + marginLeft: theme.spacing(1), + width: "auto", + }, +})) + +const SearchIconWrapper = styled("div")(({ theme }) => ({ + padding: theme.spacing(0, 2), + height: "100%", + position: "absolute", + pointerEvents: "none", + display: "flex", + alignItems: "center", + justifyContent: "center", +})) + +const StyledInputBase = styled(InputBase)(({ theme }) => ({ + color: "inherit", + "& .MuiInputBase-input": { + padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${theme.spacing(4)})`, + transition: theme.transitions.create("width"), + width: "100%", + [theme.breakpoints.up("sm")]: { + width: "12ch", + "&:focus": { + width: "20ch", + }, + }, + }, +})) + +export default function Navbar({ movieGernresList }) { + return ( + + + +
+ NeoCine Logo +
+
+ + + + + + + +
+ + + + + + + + + + ) +} + +const StyledMenu = styled((props) => ( + +))(({ theme }) => ({ + "& .MuiPaper-root": { + borderRadius: 6, + marginTop: theme.spacing(1), + minWidth: 180, + color: + theme.palette.mode === "light" + ? "rgb(55, 65, 81)" + : theme.palette.grey[300], + boxShadow: + "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px", + "& .MuiMenu-list": { + padding: "4px 0", + }, + "& .MuiMenuItem-root": { + "& .MuiSvgIcon-root": { + fontSize: 18, + color: theme.palette.text.secondary, + marginRight: theme.spacing(1.5), + }, + "&:active": { + backgroundColor: alpha( + theme.palette.primary.main, + theme.palette.action.selectedOpacity, + ), + }, + }, + }, +})) + +export function ActorsBtn() { + return ( +
+ +
+ ) +} +export function HomeBtn() { + return ( +
+ +
+ ) +} diff --git a/src/components/Searchbar.js b/src/components/Searchbar.jsx similarity index 100% rename from src/components/Searchbar.js rename to src/components/Searchbar.jsx diff --git a/src/components/Tvcredits.js b/src/components/Tvcredits.jsx similarity index 95% rename from src/components/Tvcredits.js rename to src/components/Tvcredits.jsx index 0b40b2f..1b886d2 100644 --- a/src/components/Tvcredits.js +++ b/src/components/Tvcredits.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react" import { fetcher } from "../../util/API" -import Cards from "../components/Cards" +import Cards from "./Cards" const Tvcredits = ({ actor_id }) => { const [credits, setCredits] = useState([]) diff --git a/src/pages/_document.js b/src/pages/_document.js index 097cb7f..c84e41c 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -1,3 +1,4 @@ +import Navbar from "@/components/Navbar" import { Html, Head, Main, NextScript } from "next/document" export default function Document() { diff --git a/src/pages/index.js b/src/pages/index.js index 510d79f..4ef0ce8 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,10 +6,14 @@ import { fetcher } from "../../util/API" import Moviescredits from "../components/Moviescredits" import Tvcredits from "../components/Tvcredits" import Searchbar from "../components/Searchbar" +import Navbar from "@/components/Navbar" +import GernresList from "@/components/GenresList" -export default function Home({ latestMovie }) { +export default function Home({ latestMovie, movieGernresList }) { return ( <> + + {/* */} {latestMovie.results.map((movie, index) => { return ( @@ -25,9 +29,12 @@ export default function Home({ latestMovie }) { export async function getStaticProps() { const data = await fetcher("trending/movie/day?language=en-US") + const genresData = await fetcher("genre/movie/list?language=en") + const moviesData = await fetcher() return { props: { latestMovie: data, + movieGernresList: genresData.genres, }, } } diff --git a/src/styles/globals.css b/src/styles/globals.css index f4bd77c..cca57b3 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,107 +1,5 @@ -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", - "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", - "Fira Mono", "Droid Sans Mono", "Courier New", monospace; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } -} - * { - box-sizing: border-box; - padding: 0; margin: 0; -} - -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -a { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } + padding: 0; + box-sizing: border-box; } From 7afe56ce310ed90bb263c71ddfa6bf5ea892415a Mon Sep 17 00:00:00 2001 From: Sidahmed Slikh Date: Sat, 16 Sep 2023 19:22:53 +0200 Subject: [PATCH 09/38] feat(create a homepage slider): implemented a responsive homepage slider with smooth transitions Closes #19 --- package-lock.json | 17 +-- package.json | 5 +- public/play.svg | 3 + src/components/Buttons.jsx | 11 ++ src/components/Slider.jsx | 88 +++++++++++++ src/pages/_app.js | 3 + src/playButton.svg | 17 +++ src/styles/Home.module.css | 231 ----------------------------------- src/styles/globals.css | 178 ++++++++++++++------------- src/styles/slider.module.css | 11 ++ 10 files changed, 236 insertions(+), 328 deletions(-) create mode 100644 public/play.svg create mode 100644 src/components/Buttons.jsx create mode 100644 src/components/Slider.jsx create mode 100644 src/playButton.svg delete mode 100644 src/styles/Home.module.css create mode 100644 src/styles/slider.module.css diff --git a/package-lock.json b/package-lock.json index 284999a..3dd7b1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "eslint-config-next": "13.4.19", "next": "13.4.19", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-multi-carousel": "^2.8.4" }, "devDependencies": { "@commitlint/cli": "^17.7.1", @@ -113,7 +114,6 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz", "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==", @@ -136,7 +136,6 @@ "version": "7.22.19", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.19.tgz", "integrity": "sha512-Tinq7ybnEPFFXhlYOYFiSjespWQk0dq2dRNAiMdRTOYQzEGqnnNyrTxPYHP5r6wGjlF1rFgABdDV0g8EwD6Qbg==", - "engines": { "node": ">=6.9.0" } @@ -230,14 +229,12 @@ } }, "node_modules/@babel/types": { - "version": "7.22.19", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.19.tgz", "integrity": "sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==", "dependencies": { "@babel/helper-string-parser": "^7.22.5", "@babel/helper-validator-identifier": "^7.22.19", - "to-fast-properties": "^2.0.0" }, "engines": { @@ -879,7 +876,6 @@ "url": "https://opencollective.com/mui" } }, - "node_modules/@mui/icons-material": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.9.tgz", @@ -905,7 +901,6 @@ } } }, - "node_modules/@mui/material": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.9.tgz", @@ -5728,6 +5723,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-multi-carousel": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.4.tgz", + "integrity": "sha512-7Is5Wr+m2ebkR+oq2Su2tjUdBwpVtB2O6Tjb74KDNfxWe/FrsTQwezTJTk/r9cKCrRp9Li308v822/5bZm7XKg==", + "engines": { + "node": ">=8" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index a94c045..d70ad01 100644 --- a/package.json +++ b/package.json @@ -14,16 +14,15 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.14.9", "@mui/material": "^5.14.9", "@mui/system": "^5.14.9", - "eslint": "8.49.0", "eslint-config-next": "13.4.19", "next": "13.4.19", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-multi-carousel": "^2.8.4" }, "devDependencies": { "@commitlint/cli": "^17.7.1", diff --git a/public/play.svg b/public/play.svg new file mode 100644 index 0000000..f96259f --- /dev/null +++ b/public/play.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Buttons.jsx b/src/components/Buttons.jsx new file mode 100644 index 0000000..c57bed2 --- /dev/null +++ b/src/components/Buttons.jsx @@ -0,0 +1,11 @@ +import * as React from "react" +import Stack from "@mui/material/Stack" +import Button from "@mui/material/Button" + +export default function Buttons({ btext }) { + return ( + + ) +} diff --git a/src/components/Slider.jsx b/src/components/Slider.jsx new file mode 100644 index 0000000..d05dac8 --- /dev/null +++ b/src/components/Slider.jsx @@ -0,0 +1,88 @@ +import * as React from "react" +import Box from "@mui/material/Box" +import { useTheme } from "@mui/material/styles" +import MobileStepper from "@mui/material/MobileStepper" +import Typography from "@mui/material/Typography" +import Button from "@mui/material/Button" +import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft" +import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" +import Card from "@mui/material/Card" +import CardActions from "@mui/material/CardActions" +import CardContent from "@mui/material/CardContent" +import CardMedia from "@mui/material/CardMedia" +import Buttons from "@/components/Buttons" +import "@/styles/slider.module.css" +import Image from "next/image" + +export default function Slider({ movies }) { + const theme = useTheme() + const [activeStep, setActiveStep] = React.useState(0) + const maxSteps = movies.length + + const handleNext = () => { + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1) + } + + return ( + + + + + + {movies[activeStep].title} + + + + + + Continue + Watching +
+ } + /> + + + + + {theme.direction === "rtl" ? ( + + ) : ( + + )} + + } + backButton={ + + } + /> + + ) +} diff --git a/src/pages/_app.js b/src/pages/_app.js index cf06318..7326f7c 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,3 +1,6 @@ +import "@/styles/slider.module.css" +import "@/styles/globals.css" + export default function App({ Component, pageProps }) { return } diff --git a/src/playButton.svg b/src/playButton.svg new file mode 100644 index 0000000..948bc78 --- /dev/null +++ b/src/playButton.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css deleted file mode 100644 index 606c74d..0000000 --- a/src/styles/Home.module.css +++ /dev/null @@ -1,231 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - max-width: var(--max-width); - width: 100%; -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: - background 200ms, - border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ""; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/src/styles/globals.css b/src/styles/globals.css index f4bd77c..ff3acd7 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,107 +1,111 @@ -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", - "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", - "Fira Mono", "Droid Sans Mono", "Courier New", monospace; +.overlay-container { + position: absolute; + width: 100%; + padding-bottom: calc(789 / 1728 * 100%); + z-index: 0; +} + +.slider { + margin-top: 2%; + position: relative; + height: 600px; - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; + z-index: -1; +} - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); +.CardContent { + position: absolute; + color: rgb(248, 248, 248); + top: 300px; +} - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); +body { + background-color: #0d0c0f; + margin: 0; + padding: 0; +} - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; +.sliderbutton { + position: absolute; + color: red; + top: 400px; } -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; +.sliderarrows { + position: absolute; + gap: 43vw; + top: 230px; - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); + background-color: transparent; +} - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); +.button { + background-color: white; + color: black; +} - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } +.css-26w9jf-MuiMobileStepper-dot { + background-color: transparent; } -* { - box-sizing: border-box; - padding: 0; - margin: 0; +.css-i4bv87-MuiSvgIcon-root { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: 4.5rem; + color: aliceblue; } -html, -body { - max-width: 100vw; - overflow-x: hidden; +.slider-container { + display: flex; + overflow: hidden; + transition: transform 0.5s ease-in-out; + margin-left: 15vw; } -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); +.slider-row { + display: flex; } -a { - color: inherit; - text-decoration: none; +.slider-item { + flex: 0 0 calc(100% / 6); } -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } +.smallSliderArrow { + background-color: #5f0909; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + box-shadow: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #ec000000; + color: rgb(7, 0, 79); + padding: 8px; + margin-top: 50px; + position: absolute; + gap: 38vw; + margin-left: 3.5%; } diff --git a/src/styles/slider.module.css b/src/styles/slider.module.css new file mode 100644 index 0000000..cf71a50 --- /dev/null +++ b/src/styles/slider.module.css @@ -0,0 +1,11 @@ +.slidertext { + position: absolute; + top: -40px; + color: red; + background-color: transparent; +} + +.CardContent { + position: absolute; + color: red; +} From e8e4f90d9bdfa7c378b42f1e5c2cd57359e150fc Mon Sep 17 00:00:00 2001 From: Sidahmed Slikh Date: Sat, 16 Sep 2023 19:41:12 +0200 Subject: [PATCH 10/38] feat(slider & cards): implement card slider component and cards component Created a small slider component that displays cards with content. This slider is designed to showcase and navigate through multiple card components Closes #21 --- src/components/CardsSlider.jsx | 76 ++++++++++++++++++++++++++++++++++ src/components/SmallCards.jsx | 61 +++++++++++++++++++++++++++ src/styles/globals.css | 3 +- 3 files changed, 138 insertions(+), 2 deletions(-) create mode 100644 src/components/CardsSlider.jsx create mode 100644 src/components/SmallCards.jsx diff --git a/src/components/CardsSlider.jsx b/src/components/CardsSlider.jsx new file mode 100644 index 0000000..a5f14aa --- /dev/null +++ b/src/components/CardsSlider.jsx @@ -0,0 +1,76 @@ +import React, { useState, useEffect } from "react" +import Box from "@mui/material/Box" +import { useTheme } from "@mui/material/styles" +import MobileStepper from "@mui/material/MobileStepper" +import Button from "@mui/material/Button" +import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft" +import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" +import Card from "@mui/material/Card" +import CardActions from "@mui/material/CardActions" +import CardContent from "@mui/material/CardContent" +import CardMedia from "@mui/material/CardMedia" +import Buttons from "@/components/Buttons" +import "@/styles/slider.module.css" +import Image from "next/image" +import Cards from "@/components/Cards" +import SmallCards from "@/components/SmallCards" + +export default function CardsSlider({ movies }) { + const theme = useTheme() + const [activeStep, setActiveStep] = useState(0) + const itemsPerRow = 5 + const maxSteps = Math.ceil(movies.length / itemsPerRow) + const [loading, setLoading] = useState(true) + + const handleNext = () => { + setActiveStep((prevActiveStep) => + Math.min(prevActiveStep + 1, maxSteps - 1), + ) + } + + const handleBack = () => { + setActiveStep((prevActiveStep) => Math.max(prevActiveStep - 1, 0)) + } + + const startIndex = activeStep * itemsPerRow + const endIndex = Math.min(startIndex + itemsPerRow, movies.length) + const displayedMovies = movies.slice(startIndex, endIndex) + + useEffect(() => { + const timer = setTimeout(() => { + setLoading(false) + }, 2000) + + return () => clearTimeout(timer) + }, []) + + return ( + + + + + } + backButton={ + + } + /> +
+ {loading ? ( + + ) : ( + displayedMovies.map((movie, index) => ( +
+ +
+ )) + )} +
+ + ) +} diff --git a/src/components/SmallCards.jsx b/src/components/SmallCards.jsx new file mode 100644 index 0000000..7974afa --- /dev/null +++ b/src/components/SmallCards.jsx @@ -0,0 +1,61 @@ +import React from "react" +import PropTypes from "prop-types" +import Grid from "@mui/material/Grid" +import Box from "@mui/material/Box" +import Typography from "@mui/material/Typography" +import Skeleton from "@mui/material/Skeleton" + +function SmallCards({ + title, + vote_average, + release_date, + backdrop_path, + loading, +}) { + const imageSrc = `https://image.tmdb.org/t/p/original${backdrop_path}` + + return ( + + + {loading ? ( + <> + + + + + + + ) : ( + <> + {title} + + + {title} + + + Vote : {vote_average} Date :{release_date} + + + + )} + + + ) +} + +SmallCards.propTypes = { + title: PropTypes.string, + overview: PropTypes.string, + poster_path: PropTypes.string, + loading: PropTypes.bool, +} + +export default SmallCards diff --git a/src/styles/globals.css b/src/styles/globals.css index 3070965..4a87a00 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,4 +1,3 @@ - .overlay-container { position: absolute; width: 100%; @@ -109,10 +108,10 @@ body { position: absolute; gap: 38vw; margin-left: 3.5%; +} * { margin: 0; padding: 0; box-sizing: border-box; - } From 9d8acb11682eddf34798706eedec50cef2f2c911 Mon Sep 17 00:00:00 2001 From: Sidahmed Slikh Date: Sat, 16 Sep 2023 19:50:51 +0200 Subject: [PATCH 11/38] feat(homepage): create the project's homepage Closes #23 --- src/pages/Home.js | 71 +++++++++++ src/styles/Home.module.css | 250 +++++++++++++++++++++++++++++++++++++ 2 files changed, 321 insertions(+) create mode 100644 src/pages/Home.js create mode 100644 src/styles/Home.module.css diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 0000000..00641fd --- /dev/null +++ b/src/pages/Home.js @@ -0,0 +1,71 @@ +import Head from "next/head" +import Image from "next/image" +import Cards from "@/components/Cards" +import { fetcher } from "../../util/API" +import Slider from "@/components/Slider" +import CardsSlider from "@/components/CardsSlider" +import styles from "@/styles/Home.module.css" + +export default function Home({ latestMovie }) { + const latestThreeMovies = latestMovie.results.slice(0, 3) + const latestFiveMovies = latestMovie.results.slice(0, 60) + return ( + <> +
+
+ + + + + + + + + + + +
+
+
+ +
+
+ +
+ +
+
+ +
+
+ + ) +} + +export async function getStaticProps() { + const data = await fetcher("trending/movie/day?language=en-US") + + return { + props: { + latestMovie: data, + }, + } +} diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css new file mode 100644 index 0000000..0b28368 --- /dev/null +++ b/src/styles/Home.module.css @@ -0,0 +1,250 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 6rem; + min-height: 100vh; +} + +.css-o69gx8-MuiCardMedia-root { + left: 20%; + display: block; + -webkit-background-size: cover; + background-size: cover; + background-repeat: no-repeat; + -webkit-background-position: center; + background-position: center; + width: 100%; + object-fit: cover; +} + +.test { + color: white; + margin: 0; + padding: 0; +} + +.description { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); +} + +.description a { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; +} + +.description p { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.grid { + display: grid; + grid-template-columns: repeat(4, minmax(25%, auto)); + max-width: var(--max-width); + width: 100%; +} + +.card { + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0); + + transition: + background 200ms, + border 200ms; +} + +.card span { + display: inline-block; + transition: transform 200ms; +} + +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; +} + +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + max-width: 30ch; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 4rem 0; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ""; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); +} + +.logo { + position: relative; +} +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +@media (prefers-reduced-motion) { + .card:hover span { + transform: none; + } +} + +/* Mobile */ +@media (max-width: 700px) { + .content { + padding: 4rem; + } + + .grid { + grid-template-columns: 1fr; + margin-bottom: 120px; + max-width: 320px; + text-align: center; + } + + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } + + .center { + padding: 8rem 0 6rem; + } + + .center::before { + transform: none; + height: 300px; + } + + .description { + font-size: 0.8rem; + } + + .description a { + padding: 1rem; + } + + .description p, + .description div { + display: flex; + justify-content: center; + position: fixed; + width: 100%; + } + + .description p { + align-items: center; + inset: 0 0 auto; + padding: 2rem 1rem 1.4rem; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); + background: linear-gradient( + to bottom, + rgba(var(--background-start-rgb), 1), + rgba(var(--callout-rgb), 0.5) + ); + background-clip: padding-box; + backdrop-filter: blur(24px); + } + + .description div { + align-items: flex-end; + pointer-events: none; + inset: auto 0 0; + padding: 2rem; + height: 200px; + background: linear-gradient( + to bottom, + transparent 0%, + rgb(var(--background-end-rgb)) 40% + ); + z-index: 1; + } +} + +/* Tablet and Smaller Desktop */ +@media (min-width: 701px) and (max-width: 1120px) { + .grid { + grid-template-columns: repeat(2, 50%); + } +} + +@media (prefers-color-scheme: dark) { + .vercelLogo { + filter: invert(1); + } + + .logo { + filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); + } +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} From 96a7a28b40dbd36f467f646fe9c39a8db7e82bb6 Mon Sep 17 00:00:00 2001 From: aboura Date: Sat, 16 Sep 2023 20:12:27 +0200 Subject: [PATCH 12/38] feat(movieid): add a server side fetch function Closes #25 --- src/components/singleMovie/Container.jsx | 0 src/pages/[movieId].js | 32 ++++++++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 src/components/singleMovie/Container.jsx create mode 100644 src/pages/[movieId].js diff --git a/src/components/singleMovie/Container.jsx b/src/components/singleMovie/Container.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/[movieId].js b/src/pages/[movieId].js new file mode 100644 index 0000000..c0fd328 --- /dev/null +++ b/src/pages/[movieId].js @@ -0,0 +1,32 @@ +import React from "react" +import Poster from "@/components/singleMovie/Poster" +import { fetcher } from "../../util/API" +import Container from "@/components/singleMovie/Container" + +export default function MoviePage({ movie, credits, trailer }) { + const video = trailer.results.find((result) => result) + + return ( + <> + +

+ + + ) +} + +// Define the getServerSideProps function to fetch data for a specific movie +export async function getServerSideProps(context) { + const { movieId } = context.query + + const movie = await fetcher(`/movie/${movieId}?language=en-US`) + const credits = await fetcher(`/movie/${movieId}/credits?language=en-US`) + const trailer = await fetcher(`/movie/${movieId}/videos?language=en-US`) + return { + props: { + movie: movie, + credits: credits, + trailer: trailer, + }, + } +} From 07b1161b2bcf0f8fa479cd4f15f19cbc317398e9 Mon Sep 17 00:00:00 2001 From: aboura Date: Sat, 16 Sep 2023 20:22:35 +0200 Subject: [PATCH 13/38] feat(poster container): add poster and container component add poster and container to the single movie page Closes #28 --- src/components/singleMovie/Container.jsx | 49 ++++++++++++++++++++++++ src/components/singleMovie/poster.jsx | 36 +++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 src/components/singleMovie/poster.jsx diff --git a/src/components/singleMovie/Container.jsx b/src/components/singleMovie/Container.jsx index e69de29..1ab3a11 100644 --- a/src/components/singleMovie/Container.jsx +++ b/src/components/singleMovie/Container.jsx @@ -0,0 +1,49 @@ +import * as React from "react" +import { styled } from "@mui/material/styles" +import Box from "@mui/material/Box" +import Paper from "@mui/material/Paper" +import Grid from "@mui/material/Grid" +import SizeAvatars from "@/components/singleMovie/actorAvatar" + +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 Container({ movie, actors, video }) { + const array = actors.cast.slice(0, 5) + console.log(video.key) + + return ( + + + + + Watch trailer:{" "} + + + + + xs=6 md=4 + + + xs=6 md=4 + + + + {" "} +

Actors:

+ + + + + + ) +} diff --git a/src/components/singleMovie/poster.jsx b/src/components/singleMovie/poster.jsx new file mode 100644 index 0000000..57a757b --- /dev/null +++ b/src/components/singleMovie/poster.jsx @@ -0,0 +1,36 @@ +//poster component +import React from "react" +import Card from "@mui/material/Card" +import CardActions from "@mui/material/CardActions" +import CardContent from "@mui/material/CardContent" +import CardMedia from "@mui/material/CardMedia" +import Button from "@mui/material/Button" +import Typography from "@mui/material/Typography" +import BasicRating from "./BasicRating" + +export default function Poster({ movie }) { + const imageUrl = `https://image.tmdb.org/t/p/w500/${movie.poster_path}` + + return ( + + + + {movie.title} + + + {movie.overview} + + + + + + ) +} From 7612691c99dc0f6fbdc3371aefedfbf83cbd84dc Mon Sep 17 00:00:00 2001 From: aboura Date: Sat, 16 Sep 2023 20:33:46 +0200 Subject: [PATCH 14/38] feat(actoravatar basicrating): add components add actor-avatar component and a rating component Closes #30 --- src/components/singleMovie/BasicRating.jsx | 17 ++++++++++ .../singleMovie/{poster.jsx => Poster.jsx} | 0 src/components/singleMovie/actorAvatar.jsx | 31 +++++++++++++++++++ src/pages/{Home.js => home.js} | 0 4 files changed, 48 insertions(+) create mode 100644 src/components/singleMovie/BasicRating.jsx rename src/components/singleMovie/{poster.jsx => Poster.jsx} (100%) create mode 100644 src/components/singleMovie/actorAvatar.jsx rename src/pages/{Home.js => home.js} (100%) diff --git a/src/components/singleMovie/BasicRating.jsx b/src/components/singleMovie/BasicRating.jsx new file mode 100644 index 0000000..7203f0e --- /dev/null +++ b/src/components/singleMovie/BasicRating.jsx @@ -0,0 +1,17 @@ +import React from "react" +import Box from "@mui/material/Box" +import Rating from "@mui/material/Rating" +import Typography from "@mui/material/Typography" + +export default function BasicRating({ movie }) { + return ( + legend": { mt: 2 }, + }} + > + || {movie.runtime} min + + + ) +} diff --git a/src/components/singleMovie/poster.jsx b/src/components/singleMovie/Poster.jsx similarity index 100% rename from src/components/singleMovie/poster.jsx rename to src/components/singleMovie/Poster.jsx diff --git a/src/components/singleMovie/actorAvatar.jsx b/src/components/singleMovie/actorAvatar.jsx new file mode 100644 index 0000000..7d7e38f --- /dev/null +++ b/src/components/singleMovie/actorAvatar.jsx @@ -0,0 +1,31 @@ +//actor avatar component +import * as React from "react" +import Avatar from "@mui/material/Avatar" +import Stack from "@mui/material/Stack" +import Typography from "@mui/material/Typography" + +export default function SizeAvatars({ array }) { + return ( + <> + + {array.map((actor) => ( + + ))} + +
+ {array.map((actor) => { + return ( + + {actor.name} + + ) + })} +
+ + ) +} diff --git a/src/pages/Home.js b/src/pages/home.js similarity index 100% rename from src/pages/Home.js rename to src/pages/home.js From 40813d4fee3706e1a30a647a97c7187b49431299 Mon Sep 17 00:00:00 2001 From: Youssouf Sergma Date: Sun, 17 Sep 2023 02:09:17 +0100 Subject: [PATCH 15/38] feat(component): add movies lists navigation menu Add movies lists navigation menu that contains popular/top-rated-now-playing/upcoming movies "fix #32" --- src/components/Movielists.js | 39 ++++++++++++++++++++++++++++++++++++ src/pages/index.js | 16 ++++----------- 2 files changed, 43 insertions(+), 12 deletions(-) create mode 100644 src/components/Movielists.js diff --git a/src/components/Movielists.js b/src/components/Movielists.js new file mode 100644 index 0000000..88fa317 --- /dev/null +++ b/src/components/Movielists.js @@ -0,0 +1,39 @@ +import React, { useState, useEffect } from "react" +import MenuItem from "@mui/material/MenuItem" +import { Box, Menu } from "@mui/material" +import { fetcher } from "../../util/API" + +const Movielists = () => { + const [movies, setMovies] = useState("") + const [selectedMovieList, setSelectedMovieList] = useState("top_rated") + const fetchMovies = async ({ moviestype }) => { + const apiRoute = `/movie/${moviestype}?language=en-US` + const data = await fetcher(apiRoute) + console.log(data.results) + setMovies(data.results) + } + + useEffect(() => { + fetchMovies({ moviestype: selectedMovieList }) + }, [selectedMovieList]) + return ( + + + setSelectedMovieList("popular")}> + Popular + + setSelectedMovieList("top_rated")}> + Top Rated + + setSelectedMovieList("now_playing")}> + Now Playing + + setSelectedMovieList("upcoming")}> + Upcoming + + + + ) +} + +export default Movielists diff --git a/src/pages/index.js b/src/pages/index.js index 510d79f..9d2d2e1 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,21 +5,13 @@ import Cards from "../components/Cards" import { fetcher } from "../../util/API" import Moviescredits from "../components/Moviescredits" import Tvcredits from "../components/Tvcredits" -import Searchbar from "../components/Searchbar" +import Movielists from "../components/Movielists" export default function Home({ latestMovie }) { return ( - <> - - {latestMovie.results.map((movie, index) => { - return ( -
- -
- ) - })} - - +
+ +
) } From 9325eb57f3a0431b4c04a82fd14b1765a0b2e492 Mon Sep 17 00:00:00 2001 From: Sidahmed Slikh Date: Sun, 17 Sep 2023 04:41:45 +0200 Subject: [PATCH 16/38] feat(navbar): add search feature and fix Nav map drawer Closes #34 --- src/components/GenresList.jsx | 19 ++++---- src/components/Layout.js | 42 +++++++++++++++++ src/components/MoviesList.jsx | 15 +++++- src/components/Navbar.jsx | 87 +++++++++++++++++++++++++++++------ src/pages/_app.js | 10 +++- src/pages/home.js | 1 + src/pages/index.js | 6 +-- 7 files changed, 149 insertions(+), 31 deletions(-) create mode 100644 src/components/Layout.js diff --git a/src/components/GenresList.jsx b/src/components/GenresList.jsx index e68100e..4161376 100644 --- a/src/components/GenresList.jsx +++ b/src/components/GenresList.jsx @@ -48,7 +48,7 @@ const StyledMenu = styled((props) => ( }, })) -export default function GenresList({ movieGernresList }) { +export default function GenresList({ Genres, tag }) { const [anchorEl, setAnchorEl] = React.useState(null) const open = Boolean(anchorEl) const handleClick = (event) => { @@ -77,7 +77,7 @@ export default function GenresList({ movieGernresList }) { }, }} > - Genres + {tag} - {movieGernresList.map((movie) => { - console.log(movie) - return ( - - {movie.name} + {Genres && Genres.genres ? ( + Genres.genres.map((genre) => ( + + {genre.name} - ) - })} + )) + ) : ( + No genres available + )} ) diff --git a/src/components/Layout.js b/src/components/Layout.js new file mode 100644 index 0000000..427ab75 --- /dev/null +++ b/src/components/Layout.js @@ -0,0 +1,42 @@ +import { useEffect, useState } from "react" +import { fetcher } from "../../util/API" +import Navbar from "@/components/Navbar" + +const Layout = ({ children }) => { + const [genresMovie, setGenresMovie] = useState(null) + const [searchResults, setSearchResults] = useState([]) + + useEffect(() => { + const fetchData = async () => { + const response = await fetcher("genre/movie/list?language=en") + setGenresMovie(response) + } + + fetchData() + }, []) + + const onSearch = async (query) => { + try { + const response = await fetcher( + `search/multi?query=${query}&include_adult=false&language=en-US&page=1`, + ) + + if (response.results && Array.isArray(response.results)) { + // Assuming the API response contains an array of results + return response.results + } + } catch (error) { + console.error("Error fetching search results:", error) + return [] + } + } + + return ( +
+ + {children(genresMovie, searchResults)} +
+ ) +} + +export default Layout diff --git a/src/components/MoviesList.jsx b/src/components/MoviesList.jsx index af9c05f..9a50986 100644 --- a/src/components/MoviesList.jsx +++ b/src/components/MoviesList.jsx @@ -94,8 +94,19 @@ export function MoviesList() { onClose={handleClose} > - - Edit + Top Rate + + + Popular + + + Latest + + + Now playing + + + Upcoming diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index c68d4e2..3630e02 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -7,20 +7,10 @@ import InputBase from "@mui/material/InputBase" import SearchIcon from "@mui/icons-material/Search" import Button from "@mui/material/Button" import Menu from "@mui/material/Menu" -import MenuItem from "@mui/material/MenuItem" -import EditIcon from "@mui/icons-material/Edit" -import Divider from "@mui/material/Divider" -import ArchiveIcon from "@mui/icons-material/Archive" -import FileCopyIcon from "@mui/icons-material/FileCopy" -import MoreHorizIcon from "@mui/icons-material/MoreHoriz" -import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown" -import IconButton from "@mui/material/IconButton" -// import MenuIcon from "@mui/icons-material/Menu" -import Typography from "@mui/material/Typography" -// import Stack from "@mui/material/Stack" import Image from "next/image" import GernresList from "./GenresList" import { MoviesList } from "./MoviesList" +import Drawer from "@mui/material/Drawer" // search component const Search = styled("div")(({ theme }) => ({ @@ -46,6 +36,7 @@ const SearchIconWrapper = styled("div")(({ theme }) => ({ display: "flex", alignItems: "center", justifyContent: "center", + fontSize: "1rem", })) const StyledInputBase = styled(InputBase)(({ theme }) => ({ @@ -65,7 +56,44 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ }, })) -export default function Navbar({ movieGernresList }) { +const DrawerWrapper = styled(Box)(({ theme }) => ({ + width: "250px", + flexShrink: 0, + "& .MuiDrawer-paper": { + width: "250px", + }, +})) + +export default function Navbar({ movieGenresList, movieslist, onSearch }) { + const [anchorEl, setAnchorEl] = React.useState(null) + const [searchQuery, setSearchQuery] = React.useState("") + const [searchResults, setSearchResults] = React.useState([]) + const [isDrawerOpen, setDrawerOpen] = React.useState(false) + const open = Boolean(anchorEl) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } + + const handleSearch = async () => { + if (searchQuery.trim() === "") { + setSearchResults([]) + return + } + + const results = await onSearch(searchQuery) + setSearchResults(results) + setDrawerOpen(true) + } + + const closeDrawer = () => { + setDrawerOpen(false) + } + return ( - + @@ -102,10 +130,43 @@ export default function Navbar({ movieGernresList }) { setSearchQuery(e.target.value)} + onKeyPress={(e) => { + if (e.key === "Enter") { + handleSearch() + } + }} /> + + + + +
+

Search Results:

+
    + {searchResults.map((result) => ( +
  • {result.name}
    • + ))} +
+
+ + ) } diff --git a/src/pages/_app.js b/src/pages/_app.js index 7326f7c..7b46437 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,6 +1,12 @@ import "@/styles/slider.module.css" import "@/styles/globals.css" +import { fetcher } from "../../util/API" +import Layout from "@/components/Layout" -export default function App({ Component, pageProps }) { - return +export default function App({ Component, pageProps, genresMovie }) { + return ( + + {(genresMovie) => } + + ) } diff --git a/src/pages/home.js b/src/pages/home.js index 00641fd..c2fd900 100644 --- a/src/pages/home.js +++ b/src/pages/home.js @@ -9,6 +9,7 @@ import styles from "@/styles/Home.module.css" export default function Home({ latestMovie }) { const latestThreeMovies = latestMovie.results.slice(0, 3) const latestFiveMovies = latestMovie.results.slice(0, 60) + return ( <>
diff --git a/src/pages/index.js b/src/pages/index.js index 4ef0ce8..035c778 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -9,10 +9,9 @@ import Searchbar from "../components/Searchbar" import Navbar from "@/components/Navbar" import GernresList from "@/components/GenresList" -export default function Home({ latestMovie, movieGernresList }) { +export default function Home({ latestMovie }) { return ( <> - {/* */} {latestMovie.results.map((movie, index) => { @@ -29,12 +28,9 @@ export default function Home({ latestMovie, movieGernresList }) { export async function getStaticProps() { const data = await fetcher("trending/movie/day?language=en-US") - const genresData = await fetcher("genre/movie/list?language=en") - const moviesData = await fetcher() return { props: { latestMovie: data, - movieGernresList: genresData.genres, }, } } From b5c2d61e3194db6df5199844a7881e64e313e4e7 Mon Sep 17 00:00:00 2001 From: benarba mohammed Date: Sun, 17 Sep 2023 12:49:06 +0200 Subject: [PATCH 17/38] feat(movies page): create movies page create movies page and add search bar in it Cloeses #36 Closes #37 --- src/components/Cards.jsx | 27 +++++++++------- src/components/GenresList.jsx | 5 ++- src/components/Searchbar.jsx | 30 +++++++++-------- src/pages/_document.js | 12 ++++++- src/pages/movies.js | 48 ++++++++++++++++++++++++++++ src/styles/cards.module.css | 32 +++++++++++++++++++ src/styles/movieSearchBar.module.css | 16 ++++++++++ src/styles/movies.module.css | 3 ++ 8 files changed, 145 insertions(+), 28 deletions(-) create mode 100644 src/pages/movies.js create mode 100644 src/styles/cards.module.css create mode 100644 src/styles/movieSearchBar.module.css create mode 100644 src/styles/movies.module.css diff --git a/src/components/Cards.jsx b/src/components/Cards.jsx index 11a3c50..cb2f9ac 100644 --- a/src/components/Cards.jsx +++ b/src/components/Cards.jsx @@ -5,28 +5,33 @@ import CardContent from "@mui/material/CardContent" import CardMedia from "@mui/material/CardMedia" import Button from "@mui/material/Button" import Typography from "@mui/material/Typography" +import styles from "@/styles/cards.module.css" -export default function Cards({ title, overview, poster_path }) { +export default function Cards({ title, overview, poster_path, release_date }) { const images = `https://image.tmdb.org/t/p/original${poster_path}` + return ( - + - - - {title} + + +

{title}

+
{release_date}
 - + {overview} - - - ) } diff --git a/src/components/GenresList.jsx b/src/components/GenresList.jsx index e68100e..cddc1e8 100644 --- a/src/components/GenresList.jsx +++ b/src/components/GenresList.jsx @@ -48,7 +48,7 @@ const StyledMenu = styled((props) => ( }, })) -export default function GenresList({ movieGernresList }) { +export default function GenresList({ movieGenresList }) { const [anchorEl, setAnchorEl] = React.useState(null) const open = Boolean(anchorEl) const handleClick = (event) => { @@ -88,8 +88,7 @@ export default function GenresList({ movieGernresList }) { open={open} onClose={handleClose} > - {movieGernresList.map((movie) => { - console.log(movie) + {movieGenresList.genres.map((movie) => { return ( {movie.name} diff --git a/src/components/Searchbar.jsx b/src/components/Searchbar.jsx index ae04868..6335d87 100644 --- a/src/components/Searchbar.jsx +++ b/src/components/Searchbar.jsx @@ -1,37 +1,41 @@ import { InputAdornment, TextField } from "@mui/material" import IconButton from "@mui/material/IconButton" -import React, { useState, useEffect } from "react" +import React, { useState } from "react" import SearchIcon from "@mui/icons-material/Search" -import { fetcher } from "../../util/API" +import styles from "@/styles/movieSearchBar.module.css" -export default function SearchBar() { +export default function SearchBar({ onSearch }) { const [searchTerm, setSearchTerm] = useState("") - const [searchresults, setSearchResults] = useState("") const handleChange = (event) => { setSearchTerm(event.target.value) } - const apiRoute = `search/movie?query=${searchTerm}&include_adult=false&language=en-US` - const searchMovie = async (e) => { - e.preventDefault() - const data = await fetcher(apiRoute) - setSearchResults(data.results) + + const handleSubmit = (event) => { + event.preventDefault() + onSearch(searchTerm) } return ( -
+ - + ), diff --git a/src/pages/_document.js b/src/pages/_document.js index c84e41c..c7f48b1 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -1,14 +1,24 @@ import Navbar from "@/components/Navbar" import { Html, Head, Main, NextScript } from "next/document" -export default function Document() { +export default function Document({ movieGenresList }) { return ( + {/* */} +
) } +export async function getStaticProps() { + const genresData = await fetcher("genre/movie/list?language=en") + return { + props: { + props: { movieGenresList: genresData }, + }, + } +} diff --git a/src/pages/movies.js b/src/pages/movies.js new file mode 100644 index 0000000..0d1d530 --- /dev/null +++ b/src/pages/movies.js @@ -0,0 +1,48 @@ +import { Grid } from "@mui/material" +import { fetcher } from "../../util/API" +import Cards from "@/components/Cards" +import Link from "next/link" +import styles from "../styles/movies.module.css" +import SearchBar from "@/components/Searchbar" +import { useState, useEffect } from "react" +const Movies = ({ latestMovie }) => { + const [searchTerm, setSearchTerm] = useState("") + const [searchResults, setSearchResults] = useState([]) + + const handleSearch = async (searchTerm) => { + const apiRoute = `search/movie?query=${searchTerm}&include_adult=false&language=en-US` + const data = await fetcher(apiRoute) + setSearchResults(data.results) + } + useEffect(() => { + handleSearch(searchTerm) + }, [searchTerm]) + const moviesToDisplay = searchTerm ? searchResults : latestMovie.results + return ( +
+ + + + {moviesToDisplay.map((movie) => { + return ( + + + + + + ) + })} + +
+ ) +} +export default Movies + +export async function getStaticProps() { + const data = await fetcher("trending/movie/day?language=en-US") + return { + props: { + latestMovie: data, + }, + } +} diff --git a/src/styles/cards.module.css b/src/styles/cards.module.css new file mode 100644 index 0000000..cdd4e14 --- /dev/null +++ b/src/styles/cards.module.css @@ -0,0 +1,32 @@ +.container { + background: black; + width: 100%; + height: auto; + position: relative; +} +.imagesStyles { + max-width: 100%; + height: auto; +} +.textStyles { + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 40%; + padding: 16px; + background-color: rgba(0, 0, 0, 0.7); + color: "white"; + transition: opacity 0.3s; + opacity: 0; +} +.container:hover .textStyles { + opacity: 1; +} +.titleStyles { + /* background-color: #F5C518; */ + color: #f5c518; +} +.overviewStyles { + color: white; +} diff --git a/src/styles/movieSearchBar.module.css b/src/styles/movieSearchBar.module.css new file mode 100644 index 0000000..aea156e --- /dev/null +++ b/src/styles/movieSearchBar.module.css @@ -0,0 +1,16 @@ +.formContainer { + display: flex; + justify-content: center; + margin: 1rem auto; + color: #f5c518; +} +.textField { + width: 80%; +} +.textField input { + color: #f5c518; +} +.searchIcon { + color: #f5c518; + font-size: 2rem; +} diff --git a/src/styles/movies.module.css b/src/styles/movies.module.css new file mode 100644 index 0000000..a45416b --- /dev/null +++ b/src/styles/movies.module.css @@ -0,0 +1,3 @@ +.wrapper { + margin: 1rem 2rem; +} From f85b8743ce2bb5e76a373d5e40298402f66f791e Mon Sep 17 00:00:00 2001 From: melissasidisid Date: Sun, 17 Sep 2023 14:55:12 +0100 Subject: [PATCH 18/38] feat(actor page): add actors page --- src/components/footer.jsx | 1 + src/pages/actor.js | 48 +++++++++++++++++++++++++++++++++++++++ src/pages/actors.jsx | 10 ++++++++ 3 files changed, 59 insertions(+) create mode 100644 src/pages/actor.js create mode 100644 src/pages/actors.jsx diff --git a/src/components/footer.jsx b/src/components/footer.jsx index 06b1497..65661c6 100644 --- a/src/components/footer.jsx +++ b/src/components/footer.jsx @@ -1,6 +1,7 @@ import react from "react" import * as React from "react" import { GitHub } from "@mui/icons-material" + import { fontSize } from "@mui/system" /*the page content/ diff --git a/src/pages/actor.js b/src/pages/actor.js new file mode 100644 index 0000000..8ca5d1b --- /dev/null +++ b/src/pages/actor.js @@ -0,0 +1,48 @@ +import { Grid } from "@mui/material" +import { fetcher } from "../../util/API" +import Cards from "@/components/Cards" +import Link from "next/link" +import styles from "../styles/movies.module.css" +import SearchBar from "@/components/Searchbar" +import { useState, useEffect } from "react" +const Movies = ({ latestMovie }) => { + const [searchTerm, setSearchTerm] = useState("") + const [searchResults, setSearchResults] = useState([]) + + const handleSearch = async (searchTerm) => { + const apiRoute = `search/movie?query=${searchTerm}&include_adult=false&language=en-US` + const data = await fetcher(apiRoute) + setSearchResults(data.results) + } + useEffect(() => { + handleSearch(searchTerm) + }, [searchTerm]) + const moviesToDisplay = searchTerm ? searchResults : latestMovie.results + return ( +
+ + + + {moviesToDisplay.map((movie) => { + return ( + + + + + + ) + })} + +
+ ) +} +export default Movies + +export async function getStaticProps() { + const data = await fetcher("trending/person/day?language=en-US") + return { + props: { + latestMovie: data, + }, + } +} diff --git a/src/pages/actors.jsx b/src/pages/actors.jsx new file mode 100644 index 0000000..a748fcc --- /dev/null +++ b/src/pages/actors.jsx @@ -0,0 +1,10 @@ +import react from "react" +import * as React from "react" +import { Button } from "@mui/material/Button" + +function actor() { + ; + + } backButton={ } /> diff --git a/src/components/MoviesList.jsx b/src/components/MoviesList.jsx index 9a50986..1265af8 100644 --- a/src/components/MoviesList.jsx +++ b/src/components/MoviesList.jsx @@ -1,4 +1,4 @@ -import * as React from "react" +import React, { useState, useEffect } from "react" import { styled, alpha } from "@mui/material/styles" import Button from "@mui/material/Button" import Menu from "@mui/material/Menu" @@ -9,6 +9,8 @@ import ArchiveIcon from "@mui/icons-material/Archive" import FileCopyIcon from "@mui/icons-material/FileCopy" import MoreHorizIcon from "@mui/icons-material/MoreHoriz" import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown" +import { Box } from "@mui/material" +import { fetcher } from "../../util/API" const StyledMenu = styled((props) => ( ( })) export function MoviesList() { + const [movies, setMovies] = useState("") + const [selectedMovieList, setSelectedMovieList] = useState("top_rated") + const fetchMovies = async ({ moviestype }) => { + const apiRoute = `/movie/${moviestype}?language=en-US` + const data = await fetcher(apiRoute) + console.log(data.results) + setMovies(data.results) + } + + useEffect(() => { + fetchMovies({ moviestype: selectedMovieList }) + }, [selectedMovieList]) + const [anchorEl, setAnchorEl] = React.useState(null) const open = Boolean(anchorEl) const handleClick = (event) => { @@ -93,19 +108,16 @@ export function MoviesList() { open={open} onClose={handleClose} > - - Top Rate - - + setSelectedMovieList("popular")}> Popular - - Latest + setSelectedMovieList("top_rated")}> + Top Rated - - Now playing + setSelectedMovieList("now_playing")}> + Now Playing - + setSelectedMovieList("upcoming")}> Upcoming diff --git a/src/components/Slider.jsx b/src/components/Slider.jsx index d05dac8..d2e3e5d 100644 --- a/src/components/Slider.jsx +++ b/src/components/Slider.jsx @@ -12,11 +12,12 @@ import CardContent from "@mui/material/CardContent" import CardMedia from "@mui/material/CardMedia" import Buttons from "@/components/Buttons" import "@/styles/slider.module.css" -import Image from "next/image" +import { useState } from "react" +import styles from "@/styles/Home.module.css" export default function Slider({ movies }) { const theme = useTheme() - const [activeStep, setActiveStep] = React.useState(0) + const [activeStep, setActiveStep] = useState(0) const maxSteps = movies.length const handleNext = () => { @@ -30,20 +31,58 @@ export default function Slider({ movies }) { return ( - - +
+
+ + + + + + + + + + + +
+ +
+ {movies[activeStep].title} - + @@ -52,13 +91,13 @@ export default function Slider({ movies }) {
} /> - {theme.direction === "rtl" ? ( - + ) : ( - + )} } backButton={ } diff --git a/src/components/SmallCards.jsx b/src/components/SmallCards.jsx index 7974afa..e53d1af 100644 --- a/src/components/SmallCards.jsx +++ b/src/components/SmallCards.jsx @@ -4,6 +4,7 @@ import Grid from "@mui/material/Grid" import Box from "@mui/material/Box" import Typography from "@mui/material/Typography" import Skeleton from "@mui/material/Skeleton" +import Rating from "@mui/material/Rating" function SmallCards({ title, @@ -36,12 +37,14 @@ function SmallCards({ {title} - - Vote : {vote_average} Date :{release_date} + + {" "} + {release_date} diff --git a/src/pages/home.js b/src/pages/home.js index c2fd900..ed9ca96 100644 --- a/src/pages/home.js +++ b/src/pages/home.js @@ -12,48 +12,17 @@ export default function Home({ latestMovie }) { return ( <> -
-
- - - - - - - - - - - -
-
-
- -
+
+
+
-
+

Latest Movies :

+
-
+

Popular Movies :

+
diff --git a/src/pages/index.js b/src/pages/index.js index b99eaa8..7b42cbe 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,6 +5,7 @@ import Cards from "../components/Cards" import { fetcher } from "../../util/API" import Moviescredits from "../components/Moviescredits" import Tvcredits from "../components/Tvcredits" +import Movielists from "@/components/Movielists" import Searchbar from "../components/Searchbar" import Navbar from "@/components/Navbar" @@ -14,7 +15,9 @@ export default function Home({ latestMovie }) { return ( <> {/* */} + + {latestMovie.results.map((movie, index) => { return (
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css index 0b28368..cff4bdd 100644 --- a/src/styles/Home.module.css +++ b/src/styles/Home.module.css @@ -1,3 +1,7 @@ +.container { + margin: 5%; +} + .main { display: flex; flex-direction: column; @@ -248,3 +252,76 @@ transform: rotate(0deg); } } + +.slider { + margin-top: -2%; + position: relative; + height: 500px; + object-fit: cover; + z-index: -3; +} + +.overlaycontainer { + margin-top: -5%; + position: absolute; + width: 100%; + + z-index: -2; + margin-bottom: 2%; +} + +/* +.glass{ + + background: linear-gradient(135deg, rgb(227, 0, 0), rgba(255, 0, 0, 0)); + backdrop-filter: blur(60px); + -webkit-backdrop-filter: blur(10px); + border-radius: 20px; + border:1px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); +} */ + +.CardContent { + position: absolute; + color: rgb(248, 248, 248); + + margin-top: -16rem; + margin-left: 6rem; +} + +.sliderbutton { + position: absolute; + color: red; + text-align: center; + margin-top: -12rem; + margin-left: 6rem; +} + +.sliderarrows { + position: absolute; + gap: 35vw; + margin-left: 5%; + top: 280px; + font-size: 4.5rem; + background-color: transparent; + color: white; +} + +.button { + background-color: white; + color: black; +} + +.titles { + color: #f5c518; + z-index: 1; + margin: 1%; + margin-left: 3%; +} + +.smallSlider { + color: #f5c518; + margin: 1%; + display: grid; + place-items: center; +} diff --git a/src/styles/globals.css b/src/styles/globals.css index 4a87a00..0e8bc67 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,47 +1,28 @@ -.overlay-container { - position: absolute; - width: 100%; - padding-bottom: calc(789 / 1728 * 100%); - z-index: 0; -} - -.slider { - margin-top: 2%; - position: relative; - height: 600px; - - z-index: -1; -} - -.CardContent { - position: absolute; - color: rgb(248, 248, 248); - top: 300px; -} - body { background-color: #0d0c0f; margin: 0; padding: 0; } -.sliderbutton { - position: absolute; - color: red; - top: 400px; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -.sliderarrows { - position: absolute; - gap: 43vw; - top: 230px; - - background-color: transparent; +.slider-container { + display: flex; + overflow: hidden; + transition: transform 0.5s ease-in-out; } -.button { - background-color: white; - color: black; +.smallSliderArrow { + background: #ec000000; + color: rgb(7, 0, 79); + margin-top: 4%; + position: absolute; + gap: 30vw; + margin-left: -6.5%; } .css-26w9jf-MuiMobileStepper-dot { @@ -62,56 +43,9 @@ body { flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - font-size: 4.5rem; + font-size: 1.5rem; color: aliceblue; } - -.slider-container { - display: flex; - overflow: hidden; - transition: transform 0.5s ease-in-out; - margin-left: 15vw; -} - -.slider-row { - display: flex; -} - -.slider-item { - flex: 0 0 calc(100% / 6); -} - -.smallSliderArrow { - background-color: #5f0909; - color: rgba(0, 0, 0, 0.87); - -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - box-shadow: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background: #ec000000; - color: rgb(7, 0, 79); - padding: 8px; - margin-top: 50px; - position: absolute; - gap: 38vw; - margin-left: 3.5%; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; +.overlayindex { + z-index: 1; } From 0c6952864172891aa1b9d2fc3b4f0d3507b910c4 Mon Sep 17 00:00:00 2001 From: aboura Date: Sun, 17 Sep 2023 18:30:27 +0200 Subject: [PATCH 21/38] feat(poster similatmovies container): modify poster and container components add similar movie and modify poster and container component Closes #44 --- src/components/singleMovie/BasicRating.jsx | 1 + src/components/singleMovie/Container.jsx | 75 +++++++--------- src/components/singleMovie/Poster.jsx | 45 ++++------ src/components/singleMovie/actorAvatar.jsx | 5 +- .../poster_components/SimpleContainer.jsx | 54 ++++++++++++ src/components/singleMovie/similarMovies.jsx | 19 ++++ src/pages/[movieId].js | 17 +++- src/styles/globals.css | 86 +++++++++++++++++++ 8 files changed, 224 insertions(+), 78 deletions(-) create mode 100644 src/components/singleMovie/poster_components/SimpleContainer.jsx create mode 100644 src/components/singleMovie/similarMovies.jsx diff --git a/src/components/singleMovie/BasicRating.jsx b/src/components/singleMovie/BasicRating.jsx index 7203f0e..95d5a61 100644 --- a/src/components/singleMovie/BasicRating.jsx +++ b/src/components/singleMovie/BasicRating.jsx @@ -8,6 +8,7 @@ export default function BasicRating({ movie }) { legend": { mt: 2 }, + display: "inline-block", }} > || {movie.runtime} min diff --git a/src/components/singleMovie/Container.jsx b/src/components/singleMovie/Container.jsx index 1ab3a11..c13f340 100644 --- a/src/components/singleMovie/Container.jsx +++ b/src/components/singleMovie/Container.jsx @@ -1,49 +1,40 @@ import * as React from "react" -import { styled } from "@mui/material/styles" -import Box from "@mui/material/Box" -import Paper from "@mui/material/Paper" -import Grid from "@mui/material/Grid" import SizeAvatars from "@/components/singleMovie/actorAvatar" +import Moviecards from "./similarMovies" -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 TrailerActorContainer({ + relatedMovies, + actors, + video, +}) { + const array1 = actors.cast.slice(0, 5) + const array2 = relatedMovies.slice(0, 5) + console.log(array2) + return ( + <> +
+
+

Trailer:

+ +
-export default function Container({ movie, actors, video }) { - const array = actors.cast.slice(0, 5) - console.log(video.key) +
+

Actors:

+ +
+
- return ( - - - - - Watch trailer:{" "} - - - - - xs=6 md=4 - - - xs=6 md=4 - - - - {" "} -

Actors:

- - - - - +
+

Similar:

+ +
+ ) } diff --git a/src/components/singleMovie/Poster.jsx b/src/components/singleMovie/Poster.jsx index 57a757b..b4c9a98 100644 --- a/src/components/singleMovie/Poster.jsx +++ b/src/components/singleMovie/Poster.jsx @@ -1,36 +1,23 @@ //poster component -import React from "react" -import Card from "@mui/material/Card" -import CardActions from "@mui/material/CardActions" -import CardContent from "@mui/material/CardContent" -import CardMedia from "@mui/material/CardMedia" -import Button from "@mui/material/Button" -import Typography from "@mui/material/Typography" -import BasicRating from "./BasicRating" +// import Card from "@mui/material/Card" +// import CardActions from "@mui/material/CardActions" +// import CardContent from "@mui/material/CardContent" +// import CardMedia from "@mui/material/CardMedia" +// import Button from "@mui/material/Button" +// import Typography from "@mui/material/Typography" +import * as React from "react" +import SimpleContainer from "./poster_components/SimpleContainer" export default function Poster({ movie }) { - const imageUrl = `https://image.tmdb.org/t/p/w500/${movie.poster_path}` + const imageUrl = `https://image.tmdb.org/t/p/w500/${movie.backdrop_path}` return ( - - - - {movie.title} - - - {movie.overview} - - - - - + <> + + ) } diff --git a/src/components/singleMovie/actorAvatar.jsx b/src/components/singleMovie/actorAvatar.jsx index 7d7e38f..bd1b7a2 100644 --- a/src/components/singleMovie/actorAvatar.jsx +++ b/src/components/singleMovie/actorAvatar.jsx @@ -2,7 +2,6 @@ import * as React from "react" import Avatar from "@mui/material/Avatar" import Stack from "@mui/material/Stack" -import Typography from "@mui/material/Typography" export default function SizeAvatars({ array }) { return ( @@ -20,9 +19,9 @@ export default function SizeAvatars({ array }) {
{array.map((actor) => { return ( - + {actor.name} - + ) })}
diff --git a/src/components/singleMovie/poster_components/SimpleContainer.jsx b/src/components/singleMovie/poster_components/SimpleContainer.jsx new file mode 100644 index 0000000..6a3228a --- /dev/null +++ b/src/components/singleMovie/poster_components/SimpleContainer.jsx @@ -0,0 +1,54 @@ +import * as React from "react" +import BasicRating from "../BasicRating" +import Buttons from "@/components/Buttons" +import Image from "next/image" + +export default function SimpleContainer({ movie, image, productionCompany }) { + console.log(productionCompany) + return ( + +
+
+
+

{movie.title}

+ +

{movie.overview}


+ Release date : {movie.release_date}
language:{" "} + {movie.original_language}{" "} +
+
+ +
+
+ + {" "} + +
+
+ Production companies:
+ {productionCompany.map((company) => ( +
+ {" "} + 
+                  {company.name}{" "}
+
+ logo +
+ ))} +
+
+
+ + ) +} diff --git a/src/components/singleMovie/similarMovies.jsx b/src/components/singleMovie/similarMovies.jsx new file mode 100644 index 0000000..e0c4048 --- /dev/null +++ b/src/components/singleMovie/similarMovies.jsx @@ -0,0 +1,19 @@ +import React from "react" +import Cards from "../Cards" + +export default function Moviecards({ array }) { + return ( + <> +
+ {array.map((film, index) => ( + + ))} +
+ + ) +} diff --git a/src/pages/[movieId].js b/src/pages/[movieId].js index c0fd328..6b38a97 100644 --- a/src/pages/[movieId].js +++ b/src/pages/[movieId].js @@ -1,16 +1,20 @@ import React from "react" import Poster from "@/components/singleMovie/Poster" import { fetcher } from "../../util/API" -import Container from "@/components/singleMovie/Container" +import TrailerActorContainer from "@/components/singleMovie/Container" -export default function MoviePage({ movie, credits, trailer }) { +export default function MoviePage({ movie, credits, trailer, similar }) { const video = trailer.results.find((result) => result) - + const relatedMovies = similar.results.map((result) => result) return ( <>

- + ) } @@ -22,11 +26,16 @@ export async function getServerSideProps(context) { const movie = await fetcher(`/movie/${movieId}?language=en-US`) const credits = await fetcher(`/movie/${movieId}/credits?language=en-US`) const trailer = await fetcher(`/movie/${movieId}/videos?language=en-US`) + const similar = await fetcher( + `/movie/${movieId}/similar?language=en-US&page=1`, + ) + return { props: { movie: movie, credits: credits, trailer: trailer, + similar: similar, }, } } diff --git a/src/styles/globals.css b/src/styles/globals.css index 4a87a00..3f60fc4 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -115,3 +115,89 @@ body { padding: 0; box-sizing: border-box; } +.simpleContainer { + /* Your existing styles for the container */ + background-color: #ccc; + box-sizing: border-box; +} + +.parent { + display: grid; + grid-template-columns: 1fr 1fr 1fr; /* Three columns with equal width */ + gap: 10px; /* Adjust the gap between grid items as needed */ + padding: 20px; /* Add padding for spacing */ + margin: 20px; + background-color: rgba(255, 255, 255, 0.4); + border-radius: 4%; +} + +/* Styling for the content grid item */ +.grid-item.content { + grid-column: 1 / 3; /* Span two columns */ + padding: 2%; +} + +/* Styling for the poster grid item */ +.grid-item.poster { + grid-column: 3 / 4; /* Span one column */ + text-align: center; /* Center the poster */ +} +#movie-image { + border-radius: 5%; +} + +/* Additional styling for other grid items as needed */ +.trailer_actor_Container { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 20px; + background-color: #f0f0f0; + border: 1px solid #ccc; + border-radius: 5px; +} + +.trailer_actor_Container h2 { + font-size: 20px; + margin-bottom: 10px; +} + +iframe#video { + width: 900px; + height: 315px; + border-radius: 5%; +} + +.five_actors_container { + margin-top: 20px; +} + +.moviecards-container { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + gap: 20px; /* Adjust the spacing between cards */ + padding: 20px; /* Optional padding for the container */ +} + +/* Styling for the individual Card component */ +.card { + width: 180px; + height: 300px; /* Fixed height for all cards */ + background: gray; + /* Optional styling for the card */ + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; /* Ensure content is stacked vertically */ + overflow: hidden; /* Hide overflowing content */ +} + +/* Styling for the CardMedia image */ +.card img { + width: 100%; + height: 140px; /* Adjust the image height as needed */ + object-fit: cover; /* Maintain aspect ratio */ + border-radius: 8px 8px 0 0; /* Rounded top corners */ +} From 4954a0d38792c3fb8831d15be79aa5497130806c Mon Sep 17 00:00:00 2001 From: imane omari Date: Sun, 17 Sep 2023 18:46:52 +0100 Subject: [PATCH 22/38] feat(actorcom actorpage [actorid]): add ActorCom and ActorPage and fetch function add ActorCom and ActorPage component and fetch function Closes #46 --- src/components/singleActor/ActorCom.jsx | 12 ++++ src/components/singleActor/ActorPage.jsx | 86 ++++++++++++++++++++++++ src/pages/ActorPage/[ActorId].js | 18 +++++ src/pages/index.js | 4 +- 4 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 src/components/singleActor/ActorCom.jsx create mode 100644 src/components/singleActor/ActorPage.jsx create mode 100644 src/pages/ActorPage/[ActorId].js diff --git a/src/components/singleActor/ActorCom.jsx b/src/components/singleActor/ActorCom.jsx new file mode 100644 index 0000000..bc8f865 --- /dev/null +++ b/src/components/singleActor/ActorCom.jsx @@ -0,0 +1,12 @@ +import React from "react" +import ActorPage from "./ActorPage" + +const ActorCom = ({ actor }) => { + return ( +
+ +
+ ) +} + +export default ActorCom diff --git a/src/components/singleActor/ActorPage.jsx b/src/components/singleActor/ActorPage.jsx new file mode 100644 index 0000000..bbf2582 --- /dev/null +++ b/src/components/singleActor/ActorPage.jsx @@ -0,0 +1,86 @@ +// +import React, { useState, useEffect } from "react" +import Cards from "../../components/Cards" +import Moviescredits from "../Moviescredits" + +const ActorPage = () => { + const [actor, setActor] = useState({ + name: "", + profile_path: "", + gender: 0, + popularity: 0, + birthday: "", + biography: "", + }) + + useEffect(() => { + // Fetch data for a single actor here + const fetchData = async () => { + const url = + "https://api.themoviedb.org/3/search/person?api_key=65e21a6acffd40b8b9411689bfb53e82&query=Bruce Willis" + const options = { + headers: { + accept: "application/json", + }, + } + + const response = await fetch(url, options) + const data = await response.json() + + // Assuming the API returns an array of actors, you can choose the first actor + if (data.results && data.results.length > 0) { + setActor(data.results[0]) + } + } + + fetchData() + }, []) + return ( +
+
+ {actor.profile_path && ( + {actor.name} + )} +
+ {actor.name &&

{actor.name}

} + {actor.gender !== undefined && ( +

Gender: {actor.gender === 1 ? "Female" : "Male"}

+ )} + {actor.popularity !== undefined && ( +

Popularity: {actor.popularity}

+ )} + {actor.birthday &&

Birthday: {actor.birthday}

} + {actor.biography &&

Biography: {actor.biography}

} +
+
+ +
+

Movies:

+
+
+ ) +} + +export default ActorPage diff --git a/src/pages/ActorPage/[ActorId].js b/src/pages/ActorPage/[ActorId].js new file mode 100644 index 0000000..44895c2 --- /dev/null +++ b/src/pages/ActorPage/[ActorId].js @@ -0,0 +1,18 @@ +// pages/actor/[actorId].js + +import React from "react" +import { useRouter } from "next/router" +import ActorPage from "@/components/singleActor/ActorPage" + +const ActorPageWrapper = () => { + const router = useRouter() + const { actorId } = router.query + + return ( +
+ +
+ ) +} + +export default ActorPageWrapper diff --git a/src/pages/index.js b/src/pages/index.js index b99eaa8..f8335b4 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,11 +5,10 @@ import Cards from "../components/Cards" import { fetcher } from "../../util/API" import Moviescredits from "../components/Moviescredits" import Tvcredits from "../components/Tvcredits" - import Searchbar from "../components/Searchbar" import Navbar from "@/components/Navbar" import GernresList from "@/components/GenresList" - +import Actor from "@/pages/ActorPage/[ActorId]" export default function Home({ latestMovie }) { return ( <> @@ -23,6 +22,7 @@ export default function Home({ latestMovie }) { ) })} + ) } From dcb0a1fa1a85f0fc38dea980167148ba5f033202 Mon Sep 17 00:00:00 2001 From: benarba mohammed Date: Sun, 17 Sep 2023 21:34:37 +0200 Subject: [PATCH 23/38] feat: add functionality to genres drops down list --- src/components/GenresList.jsx | 17 +++++--- src/components/Layout.js | 12 ++++- src/components/Navbar.jsx | 82 ++++++++++++++++++++++------------- src/pages/movies.js | 13 +++++- 4 files changed, 86 insertions(+), 38 deletions(-) diff --git a/src/components/GenresList.jsx b/src/components/GenresList.jsx index 537828f..8adcee1 100644 --- a/src/components/GenresList.jsx +++ b/src/components/GenresList.jsx @@ -48,9 +48,7 @@ const StyledMenu = styled((props) => ( }, })) - -export default function GenresList({ Genres, tag }) { - +export default function GenresList({ Genres, tag, onGenreSelect }) { const [anchorEl, setAnchorEl] = React.useState(null) const open = Boolean(anchorEl) const handleClick = (event) => { @@ -59,6 +57,11 @@ export default function GenresList({ Genres, tag }) { const handleClose = () => { setAnchorEl(null) } + const handleGenreSelect = (genreId) => { + onGenreSelect(genreId) + console.log("genre id is ", genreId) + handleClose() + } return (
@@ -90,12 +93,14 @@ export default function GenresList({ Genres, tag }) { open={open} onClose={handleClose} > - {Genres && Genres.genres ? ( Genres.genres.map((genre) => ( - + handleGenreSelect(genre.id)} + key={genre.id} + disableRipple + > {genre.name} - )) ) : ( diff --git a/src/components/Layout.js b/src/components/Layout.js index 427ab75..921d05c 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -5,6 +5,7 @@ import Navbar from "@/components/Navbar" const Layout = ({ children }) => { const [genresMovie, setGenresMovie] = useState(null) const [searchResults, setSearchResults] = useState([]) + const [selectedGenreId, setSelectedGenreId] = useState(null) useEffect(() => { const fetchData = async () => { @@ -31,9 +32,18 @@ const Layout = ({ children }) => { } } + const handleGenreSelect = (genreId) => { + setSelectedGenreId(genreId) + console.log("genre id in the layout", genreId) + } + return (
- + {children(genresMovie, searchResults)}
) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 3630e02..636b532 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -11,7 +11,8 @@ import Image from "next/image" import GernresList from "./GenresList" import { MoviesList } from "./MoviesList" import Drawer from "@mui/material/Drawer" - +import GenresList from "./GenresList" +import Link from "next/link" // search component const Search = styled("div")(({ theme }) => ({ position: "relative", @@ -64,11 +65,26 @@ const DrawerWrapper = styled(Box)(({ theme }) => ({ }, })) -export default function Navbar({ movieGenresList, movieslist, onSearch }) { +export default function Navbar({ + movieGenresList, + movieslist, + onSearch, + onGenreSelect, +}) { const [anchorEl, setAnchorEl] = React.useState(null) const [searchQuery, setSearchQuery] = React.useState("") const [searchResults, setSearchResults] = React.useState([]) const [isDrawerOpen, setDrawerOpen] = React.useState(false) + const [selectedGenre, setSelectedGenre] = React.useState(null) + + const handleGenreSelect = (genreId) => { + setSelectedGenre(genreId) + console.log("genre in navbar is ", genreId) + + // to the layout component + onGenreSelect(genreId) + } + const open = Boolean(anchorEl) const handleClick = (event) => { @@ -117,7 +133,11 @@ export default function Navbar({ movieGenresList, movieslist, onSearch }) {
- + @@ -217,38 +237,42 @@ const StyledMenu = styled((props) => ( export function ActorsBtn() { return (
- + + +
) } export function HomeBtn() { return (
- + + +
) } diff --git a/src/pages/movies.js b/src/pages/movies.js index 0d1d530..baf7f1c 100644 --- a/src/pages/movies.js +++ b/src/pages/movies.js @@ -5,7 +5,8 @@ import Link from "next/link" import styles from "../styles/movies.module.css" import SearchBar from "@/components/Searchbar" import { useState, useEffect } from "react" -const Movies = ({ latestMovie }) => { + +const Movies = ({ latestMovie, selectedGenre }) => { const [searchTerm, setSearchTerm] = useState("") const [searchResults, setSearchResults] = useState([]) @@ -17,7 +18,15 @@ const Movies = ({ latestMovie }) => { useEffect(() => { handleSearch(searchTerm) }, [searchTerm]) - const moviesToDisplay = searchTerm ? searchResults : latestMovie.results + const moviesToDisplay = selectedGenre + ? latestMovie.results.filter((movie) => + movie.genre_ids.includes(selectedGenre), + ) + : searchTerm + ? searchResults + : latestMovie.results + console.log("this is selected genres", selectedGenre) + return (
From 5c8dcd50c8d227a84d625df1cd1ba0608a262397 Mon Sep 17 00:00:00 2001 From: Sidahmed Slikh Date: Sun, 17 Sep 2023 22:41:49 +0200 Subject: [PATCH 24/38] style(singlemovie): styling For Single Movie Page Closes #49 --- src/components/singleMovie/Container.jsx | 16 +++-- src/components/singleMovie/actorAvatar.jsx | 29 ++++----- .../poster_components/SimpleContainer.jsx | 9 ++- src/styles/Single.module.css | 3 + src/styles/globals.css | 64 +++++++++++++++++-- 5 files changed, 87 insertions(+), 34 deletions(-) create mode 100644 src/styles/Single.module.css diff --git a/src/components/singleMovie/Container.jsx b/src/components/singleMovie/Container.jsx index c13f340..e3f6a14 100644 --- a/src/components/singleMovie/Container.jsx +++ b/src/components/singleMovie/Container.jsx @@ -1,6 +1,8 @@ import * as React from "react" import SizeAvatars from "@/components/singleMovie/actorAvatar" import Moviecards from "./similarMovies" +import styles from "@/styles/Home.module.css" +import CardsSlider from "@/components/CardsSlider" export default function TrailerActorContainer({ relatedMovies, @@ -8,17 +10,16 @@ export default function TrailerActorContainer({ video, }) { const array1 = actors.cast.slice(0, 5) - const array2 = relatedMovies.slice(0, 5) - console.log(array2) + const array2 = relatedMovies.slice(0, 20) + return ( <> +
-

Trailer:

+

Trailer: