From 51af2c31b99a361f35f59cf0e8864be8bd26caf3 Mon Sep 17 00:00:00 2001 From: ThiagoDuutra Date: Mon, 9 Jan 2023 17:14:48 -0300 Subject: [PATCH] feat: Cria CustomForm --- .vscode/settings.json | 2 + react-academy/package-lock.json | 195 +++++++++++++++++- react-academy/package.json | 4 +- .../BreadCrumb/BreadImages/arrow.png | Bin 0 -> 232 bytes .../BreadCrumb/BreadImages/home.png | Bin 0 -> 427 bytes .../CustomForm/CustomFormContato/index.tsx | 171 +++++++++++++++ .../src/Components/CustomForm/index.tsx | 51 +++++ .../src/Components/CustomForm/style.css | 0 .../Components/Footer/ImagesFooter/top.png | Bin 0 -> 738 bytes .../Footer/ImagesFooter/whatsapp.png | Bin 0 -> 1036 bytes .../Components/Header/HeaderDesktop/index.tsx | 99 +++++---- .../Components/Header/HeaderTablets/index.tsx | 14 +- .../Components/Header/HeaderTablets/style.css | 6 +- react-academy/src/Components/Header/index.tsx | 24 ++- react-academy/src/global.css | 7 + react-academy/src/schema/FormSchema.ts | 5 + react-academy/src/schema/FormSchemaCont.ts | 43 ++++ 17 files changed, 560 insertions(+), 61 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 react-academy/src/Components/BreadCrumb/BreadImages/arrow.png create mode 100644 react-academy/src/Components/BreadCrumb/BreadImages/home.png create mode 100644 react-academy/src/Components/CustomForm/CustomFormContato/index.tsx create mode 100644 react-academy/src/Components/CustomForm/index.tsx create mode 100644 react-academy/src/Components/CustomForm/style.css create mode 100644 react-academy/src/Components/Footer/ImagesFooter/top.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/whatsapp.png create mode 100644 react-academy/src/schema/FormSchema.ts create mode 100644 react-academy/src/schema/FormSchemaCont.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/react-academy/package-lock.json b/react-academy/package-lock.json index 36ea42a..55f2423 100644 --- a/react-academy/package-lock.json +++ b/react-academy/package-lock.json @@ -15,12 +15,14 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "typescript": "^4.9.4", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" } }, "node_modules/@adobe/css-tools": { @@ -3810,6 +3812,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/lodash": { + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==" + }, "node_modules/@types/mime": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", @@ -7961,6 +7968,42 @@ "node": ">= 6" } }, + "node_modules/formik": { + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz", + "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==", + "funding": [ + { + "type": "individual", + "url": "https://opencollective.com/formik" + } + ], + "dependencies": { + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^1.10.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/formik/node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/formik/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -8336,6 +8379,19 @@ "he": "bin/he" } }, + "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/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -11401,6 +11457,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -11726,6 +11787,11 @@ "multicast-dns": "cli.js" } }, + "node_modules/nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -13628,6 +13694,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -13937,6 +14008,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15494,6 +15570,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -15526,6 +15607,11 @@ "node": ">=0.6" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "node_modules/tough-cookie": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", @@ -16826,6 +16912,23 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + }, + "engines": { + "node": ">=10" + } } }, "dependencies": { @@ -19417,6 +19520,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "@types/lodash": { + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==" + }, "@types/mime": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", @@ -22490,6 +22598,32 @@ "mime-types": "^2.1.12" } }, + "formik": { + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz", + "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==", + "requires": { + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^1.10.0" + }, + "dependencies": { + "deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==" + }, + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -22748,6 +22882,21 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "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==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -24956,6 +25105,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -25201,6 +25355,11 @@ "thunky": "^1.0.2" } }, + "nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -26385,6 +26544,11 @@ } } }, + "property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -26607,6 +26771,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -27750,6 +27919,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -27773,6 +27947,11 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" }, + "toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "tough-cookie": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", @@ -28766,6 +28945,20 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "requires": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + } } } } diff --git a/react-academy/package.json b/react-academy/package.json index 36e7ed2..984d3b6 100644 --- a/react-academy/package.json +++ b/react-academy/package.json @@ -10,12 +10,14 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "typescript": "^4.9.4", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", diff --git a/react-academy/src/Components/BreadCrumb/BreadImages/arrow.png b/react-academy/src/Components/BreadCrumb/BreadImages/arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..534ef5ba2a7920ce8e369a18d53e8ff515136986 GIT binary patch literal 232 zcmeAS@N?(olHy`uVBq!ia0vp^93VCa8<3oGNZ$fTaTa()7Besi%mHCWwX;?xKtaah zAa^H*b?0PW0y!+{j=qiz3>*8o|0J>k`L&)djv*C{trHINHYo78<_f>-d&HIZz-_}M z;S8oZr6TWTHmF_{S@BW+mfHW;e@x7pEd>SsnrD|}3pnXnKA(CkrRS!{VwMMzd%p8A z==3hH;Z#}cD7wH=_JV_T7K75WP4Wxk1(UawObrg-k|r8teBXHgnMv*3Gr85T?fVsO Y-VvBOBjQqxGteOnp00i_>zopr0E)j%?EnA( literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/BreadCrumb/BreadImages/home.png b/react-academy/src/Components/BreadCrumb/BreadImages/home.png new file mode 100644 index 0000000000000000000000000000000000000000..08b446fc63feb6a71f2ef83b31fe265bd7923c93 GIT binary patch literal 427 zcmV;c0aX5pP)X1^@s6D=Y3@00009a7bBm000o2 z000o20Vd5lGynhq0drDELIAGL9O(c600d`2O+f$vv5yPji?(I^HM|g zKP2sHASF~3MQg`#BJP)ExrGYJI+9E>%-t@OOCgg0)4XY#*LD%nixfh0%zfYAb39Gc zy%a)o&3j29bdLEP2%T##h0qdn351rKPeJGs=3@}Dis;~Z-m_XDKn{RB^$=}VXkFJ| zYN2ofdDnH}{jNLHSY22EeQ>)9g5VL`3bC#5)Wj^y_+HjSM!2tdVCW6U9k0}g7>p(Y zd~gmv-~mSY(D*38&=E)ZX~jaV^=@o;VgQ@tD34|=NfK^$Q){*QXWap}2eb*^6&gPo zoX_Ta&MD}gh;yZGux4YA^>MUYF2XiVtEwvSZYcHp*I?^U+$cWRj>Eiw=eN3segKo) V_kc>j7N7tC002ovPDHLkV1l;3utop? literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/CustomForm/CustomFormContato/index.tsx b/react-academy/src/Components/CustomForm/CustomFormContato/index.tsx new file mode 100644 index 0000000..d90d50a --- /dev/null +++ b/react-academy/src/Components/CustomForm/CustomFormContato/index.tsx @@ -0,0 +1,171 @@ +import React, { useState } from "react"; +import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; +import FormSchemaCont from "../../../schema/FormSchemaCont"; + +export interface IformikValues { + name: string; + email: string; + cpf: string; + dataNasc: string; + tel: string; + instagram: string; + declaro: boolean; +} + +const initialValues: IformikValues = { + name: "", + email: "", + cpf: "", + dataNasc: "", + tel: "", + instagram: "", + declaro: false, +}; + +const CustomFormCont = () => { + const handleForm = ( + values: IformikValues, + { resetForm }: FormikHelpers + ) => { + setSubmitted(true); + resetForm(); + }; + + const [submitted, setSubmitted] = useState(false); + + return ( +
+ + {({ errors, touched }) => ( +
+
+

Preencha o Formulário

+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+
+ + {submitted ? ( + *Formulário enviado com sucesso + ) : null} +
+
+ )} + +
+ ); +}; + +export default CustomFormCont; diff --git a/react-academy/src/Components/CustomForm/index.tsx b/react-academy/src/Components/CustomForm/index.tsx new file mode 100644 index 0000000..b7e456f --- /dev/null +++ b/react-academy/src/Components/CustomForm/index.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; +import FormSchema from "../../schema/FormSchema"; +import "./style.css"; + +interface IformikValues { + email: string; +} + +const initialValues = { + email: "", +}; + +const CustomForm = () => { + const handleFormikNewsLetter = (values: IformikValues) => { + console.log(values); + }; + return ( + + {({ errors, touched }) => ( +
+
+ + + +
+
+ +
+
+ )} + + ); +}; + +export default CustomForm; diff --git a/react-academy/src/Components/CustomForm/style.css b/react-academy/src/Components/CustomForm/style.css new file mode 100644 index 0000000..e69de29 diff --git a/react-academy/src/Components/Footer/ImagesFooter/top.png b/react-academy/src/Components/Footer/ImagesFooter/top.png new file mode 100644 index 0000000000000000000000000000000000000000..3885457021a9e09de2b5dd15bb2f1a317bc1d190 GIT binary patch literal 738 zcmV<80v-K{P)H0UiNMG#a+Xi9b`% zawA|2wDDj+$?CSd+J3I8uC8j0T%grz#lzw7HzCBA&1Qp3*EB7TG47AJKg7lT`^94M zSgBNos_)iRgxc+PnLlvH-7>iV&$(Z(*T0L!qH$LC)F5j>k3=GW+!AmiG@s9Fr!*vv z4RpKRDx2ZSD+z#2b<02W)ai779+T0IkhtT?b-DsrJN0}%-+1?&d?ay-jCMex$|RcP z4{C)%q4|yo91}hvm!l6D@e=ogWMZ)xDPkDrRPGr$ zsETy2*HaOr<#I`;X_6{<)x0tXp+4hE;1Kd(aCrSo0RtJo;CukiYEVF6vpgUt5%x`k zf`gT%Sw!r*!yuo5GDFrp+knP)`av#YidUdAM6Dz5w?ts4)oSINiC7zr-GXZ`#Ft8? zrXT)-Z|r997BMG5&SC2^g}Vj`_KW)AbH_~&f@~((@56isKEX}Ri3D)A2WAa97^2Ybij@n9i0~(M- U&&czbQ2+n{07*qoM6N<$f)i;zlK=n! literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/ImagesFooter/whatsapp.png b/react-academy/src/Components/Footer/ImagesFooter/whatsapp.png new file mode 100644 index 0000000000000000000000000000000000000000..4e9df5fe738f0c9f68a2c0f4448fa4a24912009d GIT binary patch literal 1036 zcmV+n1oQieP)Qof=X(Td1|c=LYBLD(1dU!y0&^O3f-HhaOqZ1dXYSYV=8zt zR|ujGD%fEY%0-G$0yj_(ZtV2DN@9Qx4_-YoLKcZ2NDR>tKu%KMbcZyQLqrWsjtOV>j~sRfxynw_ zc4CJ%b~eZl@8QUP3&noYJf-E|U&sPD)r@T6f0V4@ zIsptBR=3Z!Q3c3k;>MY48e$fpUm?P=fum2) z;_UINoH-`J1TBQui`F6TCXEZ0E6W=xT&Zj#E8$2|Komu4H!|2sZ0pXi{#hj}0S*^A zM%+dQAAfz$nd9_*x%`T(L=v6cl*sJb`<%HKAhB)Wsr>@Q%*{lcMh5)!@4iiH=Gv_d z)D)azK8w-l7_Dbi)4K9ntFuM{6N#G{@HT`Oo@?eF)ZM4+s3#U8ZbK*R!pUhfE8Zdj zf9#DEIE9(y*Ugn2drtdqPbcjr69x4q2&bs+e5a=w<-IyKnKAjq9&saTTd4pnY%D4zKeOU`K&)By4kJ)=SL3-8 zr6&|JOlo#*4x|#f3)^T=P?h;66@hN-<{h}cSQvF~+`meM9^hb&P!Sl7zM&xm@OqKj zJ>dba6Qs1gosZ?rKJ@bbio|$Q?YZFa2)8#h7<|C zwt$-tPx_^M>iHg8AqPqfq+&7PK(0lwI_zbNv}BJNw1hZfqhUssiW>2JYuvXgoAe$l zf&27L`~QpQbctulc2p$LZbO+QG(-@+0XhnR#8ihgkUgDN@uEOiWja*Ev3@A?T_zK0 z6`!>&aWD_#=*MP`(7_Smz|7u`Oeh{vwnd;ABA0I($@+{Sf#@)<1!V(~ZAJhiRPbjB zR?(5Y3Tp~Zak$Wn7v^@=gFG}JYOvsvEYi|el12(yGlhQ~BTij{ - return ( -
-
+const HeaderDesktop = () => { + return ( +
+
+
+ + Logo M3 academy + +
+ + +
+
+ + ENTRAR + + +
+
-
- - Logo M3 academy - -
- - -
-
- ENTRAR - -
-
- -
-
-
- CURSOS - SAIBA MAIS - INSTITUCIONAIS -
-
-
+
+
+
+ + CURSOS + + + SAIBA MAIS + + + INSTITUCIONAIS +
-
- ) -} -export default HeaderDesktop; \ No newline at end of file + + + + + ); +}; +export default HeaderDesktop; diff --git a/react-academy/src/Components/Header/HeaderTablets/index.tsx b/react-academy/src/Components/Header/HeaderTablets/index.tsx index dd47aec..6eafcde 100644 --- a/react-academy/src/Components/Header/HeaderTablets/index.tsx +++ b/react-academy/src/Components/Header/HeaderTablets/index.tsx @@ -8,12 +8,12 @@ import menu from "../ImagesHeader/menu.png"; import closeMenu from "../ImagesHeader/close-menu.png"; const HeaderTablets = () => { - const [Open, setOpen] = useState(false); + const [open, setOpen] = useState(false); useEffect(() => { const body = document.querySelector("body") as HTMLElement; body.classList.toggle("menu"); - }, [Open]); + }, []); return (
@@ -22,16 +22,15 @@ const HeaderTablets = () => {
@@ -58,6 +57,7 @@ const HeaderTablets = () => {
+ { - const [width, setWidth] = useState(window.innerWidth); +const Header = () => { + const [width, setWidth] = useState(window.innerWidth); - const handleWindow = ()=>{ - setWidth(window.innerWidth); - } + const handleWindow = () => { + setWidth(window.innerWidth); + }; - useEffect(() => { + useEffect(() => { window.addEventListener("resize", handleWindow); return () => { window.removeEventListener("resize", handleWindow); }; }, []); - return
{width <= 1024 ? : }
-} -export default Header; \ No newline at end of file + return ( +
{width <= 1024 ? : }
+ ); +}; +export default Header; diff --git a/react-academy/src/global.css b/react-academy/src/global.css index 04dab42..be57229 100644 --- a/react-academy/src/global.css +++ b/react-academy/src/global.css @@ -25,6 +25,7 @@ li { /*COLORS*/ :root { --color-black: #000; + --color-black-100: #100d0e; --color-white: #fff; --color-white-100: #f0f0f0; @@ -32,4 +33,10 @@ li { --color-gray-100: #303030; --color-gray-200: #c4c4c4; --color-gray-300: #e5e5e5; + --color-gray-400: #7d7d7d; + --color-gray-500: #292929; + + --color-red: #ff0000; + + --color-green: #008000; } diff --git a/react-academy/src/schema/FormSchema.ts b/react-academy/src/schema/FormSchema.ts new file mode 100644 index 0000000..3ed8f81 --- /dev/null +++ b/react-academy/src/schema/FormSchema.ts @@ -0,0 +1,5 @@ +import * as Yup from "yup"; + +export default Yup.object().shape({ + email: Yup.string().email("Email Inválido"), +}); diff --git a/react-academy/src/schema/FormSchemaCont.ts b/react-academy/src/schema/FormSchemaCont.ts new file mode 100644 index 0000000..1730dd3 --- /dev/null +++ b/react-academy/src/schema/FormSchemaCont.ts @@ -0,0 +1,43 @@ +import * as Yup from "yup"; +import { IformikValues } from "../Components/CustomForm/CustomFormContato"; + +const cpfRegex = /([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2})/; + +const dataNascRegex = + /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/; + +const telRegex = + /\(?\ [0-9]{1,3}\)? ?-?[0-9]{1,3} ?-?[0-9]{3,5} ?-?[0-9]{4}( ?-?[0-9]{3})? ?(\w{1,10}\s?\d{1,6})?/; + +const instaRegex = + /(?:@)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)/; + +const formYup: Yup.SchemaOf = Yup.object().shape({ + name: Yup.string() + .min(3, "O nome deve conter mais de 2 caracteres") + .required("*Campo Obrigatório"), + + email: Yup.string().email("Email Inválido").required("*Campo Obrigatório"), + + cpf: Yup.string() + .matches(cpfRegex, "CPF inválido") + .required("*Campo Obrigatório"), + + dataNasc: Yup.string() + .matches(dataNascRegex, "Data de nascimento inválida") + .required("*Campo Obrigatório"), + + tel: Yup.string() + .matches(telRegex, "Número de telefone inválido") + .required("*Campo Obrigatório"), + + instagram: Yup.string() + .matches(instaRegex, "User inválido") + .required("*Campo Obrigatório"), + + declaro: Yup.boolean() + .oneOf([true], "*Campo Obrigatório") + .required("*Campo Obrigatório"), +}); + +export default formYup;