From aecbcf5b157b0bcd4807160d2c9ca05a057fb183 Mon Sep 17 00:00:00 2001 From: Marcelo dos Santos Rocha Nepomuceno Date: Tue, 12 Jul 2022 12:08:17 -0300 Subject: [PATCH] Body Page (#1) --- package-lock.json | 204 +++++++++++++++++++++++++++++++++++++- package.json | 5 +- src/Pages/Event.tsx | 4 +- src/components/Footer.tsx | 5 + src/components/Player.tsx | 7 -- src/components/Video.tsx | 89 +++++++++++++++++ 6 files changed, 303 insertions(+), 11 deletions(-) create mode 100644 src/components/Footer.tsx delete mode 100644 src/components/Player.tsx create mode 100644 src/components/Video.tsx diff --git a/package-lock.json b/package-lock.json index 69f4931..fadd842 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,14 @@ "version": "0.0.0", "dependencies": { "@apollo/client": "^3.6.9", + "@vime/core": "^5.3.1", + "@vime/react": "^5.3.1", "date-fns": "^2.28.0", "graphql": "^16.5.0", "phosphor-react": "^1.4.1", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-router-dom": "^6.3.0" }, "devDependencies": { "@types/react": "^18.0.0", @@ -419,6 +422,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz", + "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -570,6 +584,28 @@ "node": ">= 8.0.0" } }, + "node_modules/@seznam/compose-react-refs": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz", + "integrity": "sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==" + }, + "node_modules/@stencil/core": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz", + "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=12.10.0", + "npm": ">=6.0.0" + } + }, + "node_modules/@types/fscreen": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/fscreen/-/fscreen-1.0.1.tgz", + "integrity": "sha512-hV2d0BreihMGtrg+EdAFOIl/O2EL5vhAheHJUztGE/lPFZIN8ZCpGFL8hCbtyi1CfhKjDRCf47sHjP+FwJ4q0Q==" + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -602,6 +638,32 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "node_modules/@vime/core": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/@vime/core/-/core-5.3.1.tgz", + "integrity": "sha512-FbBla3WhQ72rWZUBR93XVpNAJwOMdQeWx8ZbRffYL5PXq0PzqSnjrYcE1KIsnmDt6v2jsOxh4hT264Rts5jBKQ==", + "dependencies": { + "@stencil/core": "2.5.2", + "@types/fscreen": "^1.0.1", + "fscreen": "^1.2.0", + "mitt": "^3.0.0", + "stencil-wormhole": "^3.4.1" + } + }, + "node_modules/@vime/react": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/@vime/react/-/react-5.3.1.tgz", + "integrity": "sha512-MnWua6FCQ84af1k4jan1aaLmL57UF2WKwqhw8fw9PQ3Rz7W+vdPEb9VmNnyNZ3PessQRg5O7R94QRvUNKqkGog==", + "hasInstallScript": true, + "dependencies": { + "@seznam/compose-react-refs": "^1.0.4" + }, + "peerDependencies": { + "@vime/core": "5.3.1", + "react": "^17.0.0", + "react-dom": "^17.0.0" + } + }, "node_modules/@vitejs/plugin-react": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-1.3.2.tgz", @@ -1431,6 +1493,11 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/fscreen": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz", + "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==" + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -1524,6 +1591,14 @@ "node": ">=4" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "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", @@ -1663,6 +1738,11 @@ "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true }, + "node_modules/mitt": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz", + "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -1981,6 +2061,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -2002,6 +2106,11 @@ "node": ">=8.10.0" } }, + "node_modules/regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -2099,6 +2208,11 @@ "node": ">=0.10.0" } }, + "node_modules/stencil-wormhole": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/stencil-wormhole/-/stencil-wormhole-3.4.1.tgz", + "integrity": "sha512-ppYTcWTJnIl4ZAKwF39LTA9f/ypHfbVefsHdN2hpMQGrR57wt1TieZo9tlCM/r1Y4SFiZ5yz/cjho564C921Xw==" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -2578,6 +2692,14 @@ "@babel/helper-plugin-utils": "^7.16.7" } }, + "@babel/runtime": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz", + "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, "@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -2697,6 +2819,21 @@ "picomatch": "^2.2.2" } }, + "@seznam/compose-react-refs": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz", + "integrity": "sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==" + }, + "@stencil/core": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz", + "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==" + }, + "@types/fscreen": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/fscreen/-/fscreen-1.0.1.tgz", + "integrity": "sha512-hV2d0BreihMGtrg+EdAFOIl/O2EL5vhAheHJUztGE/lPFZIN8ZCpGFL8hCbtyi1CfhKjDRCf47sHjP+FwJ4q0Q==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2729,6 +2866,26 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "@vime/core": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/@vime/core/-/core-5.3.1.tgz", + "integrity": "sha512-FbBla3WhQ72rWZUBR93XVpNAJwOMdQeWx8ZbRffYL5PXq0PzqSnjrYcE1KIsnmDt6v2jsOxh4hT264Rts5jBKQ==", + "requires": { + "@stencil/core": "2.5.2", + "@types/fscreen": "^1.0.1", + "fscreen": "^1.2.0", + "mitt": "^3.0.0", + "stencil-wormhole": "^3.4.1" + } + }, + "@vime/react": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/@vime/react/-/react-5.3.1.tgz", + "integrity": "sha512-MnWua6FCQ84af1k4jan1aaLmL57UF2WKwqhw8fw9PQ3Rz7W+vdPEb9VmNnyNZ3PessQRg5O7R94QRvUNKqkGog==", + "requires": { + "@seznam/compose-react-refs": "^1.0.4" + } + }, "@vitejs/plugin-react": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-1.3.2.tgz", @@ -3228,6 +3385,11 @@ "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", "dev": true }, + "fscreen": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz", + "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==" + }, "fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -3290,6 +3452,14 @@ "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", "dev": true }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "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", @@ -3390,6 +3560,11 @@ "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true }, + "mitt": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz", + "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -3586,6 +3761,23 @@ "integrity": "sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==", "dev": true }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3604,6 +3796,11 @@ "picomatch": "^2.2.1" } }, + "regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -3665,6 +3862,11 @@ "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", "dev": true }, + "stencil-wormhole": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/stencil-wormhole/-/stencil-wormhole-3.4.1.tgz", + "integrity": "sha512-ppYTcWTJnIl4ZAKwF39LTA9f/ypHfbVefsHdN2hpMQGrR57wt1TieZo9tlCM/r1Y4SFiZ5yz/cjho564C921Xw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/package.json b/package.json index 13ea405..7763dae 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,14 @@ }, "dependencies": { "@apollo/client": "^3.6.9", + "@vime/core": "^5.3.1", + "@vime/react": "^5.3.1", "date-fns": "^2.28.0", "graphql": "^16.5.0", "phosphor-react": "^1.4.1", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-router-dom": "^6.3.0" }, "devDependencies": { "@types/react": "^18.0.0", diff --git a/src/Pages/Event.tsx b/src/Pages/Event.tsx index 1f204f7..4a8b456 100644 --- a/src/Pages/Event.tsx +++ b/src/Pages/Event.tsx @@ -1,5 +1,5 @@ import { Header } from "../components/Header"; -import { Player } from "../components/Player"; +import { Video } from "../components/Video"; import { SideBar } from "../components/SideBar"; export function Event() { @@ -7,7 +7,7 @@ export function Event() {
- +
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..47f7680 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,5 @@ +export function Footer() { + return ( +
+ ) +} \ No newline at end of file diff --git a/src/components/Player.tsx b/src/components/Player.tsx deleted file mode 100644 index 7cd77f2..0000000 --- a/src/components/Player.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export function Player(){ - return( -
- Video -
- ) -} \ No newline at end of file diff --git a/src/components/Video.tsx b/src/components/Video.tsx new file mode 100644 index 0000000..b7a0f97 --- /dev/null +++ b/src/components/Video.tsx @@ -0,0 +1,89 @@ +import { DefaultUi, Player, Youtube } from "@vime/react"; +import { CaretRight, DiscordLogo, FileArrowDown, Lightning } from "phosphor-react"; + +import '@vime/core/themes/default.css'; + +export function Video() { + return ( +
+
+
+ + + + +
+
+ +
+
+
+

+ Aula 1 - Abertura do Ignite Lab +

+

+ Nessa aula vamos dar início ao projeto criando a estrutura base da aplicação utilizando ReactJS, Vite e TailwindCSS. Vamos também realizar o setup do nosso projeto no GraphCMS criando as entidades da aplicação e integrando a API GraphQL gerada pela plataforma no nosso front-end utilizando Apollo Client. +

+ +
+ Foto Professor +
+ + Marcelo Nepomuceno + + + Dev + +
+
+ +
+
+ + + Comunidade do Discord + + + + Acesse o Desafio + +
+
+ +
+ +
+ +
+
+ Mateiral Complementar +

+ Acesse o material complementar para acelerar o seu desenvolvimento +

+
+
+ +
+ + +
+ +
+
+ Wallpaper exclusivos +

+ Baixe wallpapers exclusivos do Ignite Lab e personalize a sua máquina +

+
+
+ +
+ +
+
+
+ ) +} \ No newline at end of file