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 0000000..534ef5b Binary files /dev/null and b/react-academy/src/Components/BreadCrumb/BreadImages/arrow.png differ 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 0000000..08b446f Binary files /dev/null and b/react-academy/src/Components/BreadCrumb/BreadImages/home.png differ 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 0000000..3885457 Binary files /dev/null and b/react-academy/src/Components/Footer/ImagesFooter/top.png differ 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 0000000..4e9df5f Binary files /dev/null and b/react-academy/src/Components/Footer/ImagesFooter/whatsapp.png differ diff --git a/react-academy/src/Components/Header/HeaderDesktop/index.tsx b/react-academy/src/Components/Header/HeaderDesktop/index.tsx index 0a9ea66..125062a 100644 --- a/react-academy/src/Components/Header/HeaderDesktop/index.tsx +++ b/react-academy/src/Components/Header/HeaderDesktop/index.tsx @@ -1,44 +1,67 @@ import React from "react"; import "./style.css"; -import logoM3Desktop from "../ImagesHeader/Logo-M3-Desktop.png" -import search from "../ImagesHeader/search.png" -import cart from "../ImagesHeader/cart.png" +import logoM3Desktop from "../ImagesHeader/Logo-M3-Desktop.png"; +import search from "../ImagesHeader/search.png"; +import cart from "../ImagesHeader/cart.png"; import { NavLink } from "react-router-dom"; -const HeaderDesktop = () =>{ - 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;