forked from M3-Academy/desafio-react-e-typescript
development #11
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -5,7 +5,7 @@
|
||||
"**/.hg": true,
|
||||
"**/CVS": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/Thumbs.db": false
|
||||
"**/Thumbs.db": true
|
||||
},
|
||||
"explorerExclude.backup": {}
|
||||
}
|
||||
|
||||
277
package-lock.json
generated
277
package-lock.json
generated
@ -7,6 +7,7 @@
|
||||
"": {
|
||||
"name": "my-app",
|
||||
"version": "0.1.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
@ -16,13 +17,17 @@
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"bootstrap": "^5.2.3",
|
||||
"formik": "^2.2.9",
|
||||
"node-sass": "^7.0.3",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.7.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-text-mask": "^5.5.0",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3136,6 +3141,14 @@
|
||||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@restart/hooks": {
|
||||
"version": "0.4.7",
|
||||
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
|
||||
@ -3902,6 +3915,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",
|
||||
@ -8472,6 +8490,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",
|
||||
@ -9005,6 +9059,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",
|
||||
@ -12194,6 +12261,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",
|
||||
@ -12685,6 +12757,11 @@
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
|
||||
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
|
||||
},
|
||||
"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",
|
||||
@ -14893,6 +14970,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",
|
||||
@ -15231,6 +15313,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",
|
||||
@ -15249,6 +15336,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
|
||||
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
|
||||
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -15321,6 +15438,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-text-mask": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
|
||||
"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.5.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
@ -17214,6 +17342,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",
|
||||
@ -17246,6 +17379,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",
|
||||
@ -18664,6 +18802,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": {
|
||||
@ -20754,6 +20909,11 @@
|
||||
"@swc/helpers": "^0.4.14"
|
||||
}
|
||||
},
|
||||
"@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
|
||||
},
|
||||
"@restart/hooks": {
|
||||
"version": "0.4.7",
|
||||
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
|
||||
@ -21326,6 +21486,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",
|
||||
@ -24721,6 +24886,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",
|
||||
@ -25093,6 +25284,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",
|
||||
@ -27411,6 +27617,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",
|
||||
@ -27783,6 +27994,11 @@
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
|
||||
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
|
||||
},
|
||||
"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",
|
||||
@ -29205,6 +29421,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",
|
||||
@ -29446,6 +29667,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",
|
||||
@ -29461,6 +29687,23 @@
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
|
||||
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
|
||||
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.2"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -29516,6 +29759,14 @@
|
||||
"workbox-webpack-plugin": "^6.4.1"
|
||||
}
|
||||
},
|
||||
"react-text-mask": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
|
||||
"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.6"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
@ -30937,6 +31188,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",
|
||||
@ -30960,6 +31216,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",
|
||||
@ -32058,6 +32319,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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,13 +11,17 @@
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"bootstrap": "^5.2.3",
|
||||
"formik": "^2.2.9",
|
||||
"node-sass": "^7.0.3",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.7.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-text-mask": "^5.5.0",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,21 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
|
||||
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -24,12 +26,13 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<title>React App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -38,6 +41,11 @@
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
36
src/components/AccordionBody/AccordionBody.tsx
Normal file
36
src/components/AccordionBody/AccordionBody.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import Col from "react-bootstrap/Col";
|
||||
import ListGroup from "react-bootstrap/ListGroup";
|
||||
import Row from "react-bootstrap/Row";
|
||||
import Tab from "react-bootstrap/Tab";
|
||||
|
||||
import styles from "./accordionBody.module.scss";
|
||||
const AccordionBody = () => {
|
||||
return (
|
||||
<Tab.Container id="list-group-tabs" defaultActiveKey="#link1">
|
||||
<Row>
|
||||
<Col sm={4}>
|
||||
<ListGroup>
|
||||
<ListGroup.Item className={styles["acc-item"]} action href="#link1">
|
||||
Link 1
|
||||
</ListGroup.Item>
|
||||
<ListGroup.Item action href="#link2">
|
||||
Link 2
|
||||
</ListGroup.Item>
|
||||
</ListGroup>
|
||||
</Col>
|
||||
<Col sm={8}>
|
||||
<Tab.Content>
|
||||
<Tab.Pane eventKey="#link1">
|
||||
<p>oi</p>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey="#link2">
|
||||
<p>tchau</p>
|
||||
</Tab.Pane>
|
||||
</Tab.Content>
|
||||
</Col>
|
||||
</Row>
|
||||
</Tab.Container>
|
||||
);
|
||||
};
|
||||
|
||||
export { AccordionBody };
|
||||
17
src/components/AccordionBody/accordionBody.module.scss
Normal file
17
src/components/AccordionBody/accordionBody.module.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.accordion-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.accordion-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.accordion-header {
|
||||
}
|
||||
/*
|
||||
.list-group-tabs.active {
|
||||
background-color: red;
|
||||
}*/
|
||||
.acc-item .active {
|
||||
background-color: red;
|
||||
}
|
||||
34
src/components/Caminhos/Caminhos.tsx
Normal file
34
src/components/Caminhos/Caminhos.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import homeImg from "./assets/image/home.png";
|
||||
import styles from "./caminhos.module.scss";
|
||||
import { Link, Outlet } from "react-router-dom";
|
||||
import { Home } from "../../pages/Home";
|
||||
import React, { useState } from "react";
|
||||
|
||||
const Caminhos = (prop: { titulo: string }) => {
|
||||
return (
|
||||
<>
|
||||
<nav>
|
||||
<ul className={styles["caminhos-itens"]}>
|
||||
<li className={styles["caminhos-item"]}>
|
||||
<Link to="/">
|
||||
<img
|
||||
className={styles["home_img"]}
|
||||
src={homeImg}
|
||||
alt="Home image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles["caminhos-item"]}>
|
||||
<p>></p>
|
||||
</li>
|
||||
<li className={styles["caminhos-item"]}>
|
||||
<p>{prop.titulo}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
};
|
||||
export { Caminhos };
|
||||
BIN
src/components/Caminhos/assets/image/home.png
Normal file
BIN
src/components/Caminhos/assets/image/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 480 B |
22
src/components/Caminhos/caminhos.module.scss
Normal file
22
src/components/Caminhos/caminhos.module.scss
Normal file
@ -0,0 +1,22 @@
|
||||
.caminhos-itens {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
p {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #c4c4c4;
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_img {
|
||||
width: 16px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 31.25px;
|
||||
}
|
||||
}
|
||||
16
src/components/Cart/Cart.tsx
Normal file
16
src/components/Cart/Cart.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import styles from "./cart.module.scss";
|
||||
import cartImg from "./assets/image/cart.png";
|
||||
|
||||
const Cart = () => {
|
||||
return (
|
||||
<a className={styles["cartLink"]} href="/">
|
||||
<img
|
||||
className={styles["cartImg"]}
|
||||
src={cartImg}
|
||||
alt="Carrinho de compras"
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export { Cart };
|
||||
BIN
src/components/Cart/assets/image/cart.png
Normal file
BIN
src/components/Cart/assets/image/cart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 732 B |
17
src/components/Cart/cart.module.scss
Normal file
17
src/components/Cart/cart.module.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.cartLink {
|
||||
display: flex;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 54.68px;
|
||||
height: 38.91px;
|
||||
}
|
||||
}
|
||||
.cartImg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 54.68px;
|
||||
height: 38.91px;
|
||||
}
|
||||
}
|
||||
12
src/components/Enter/Enter.tsx
Normal file
12
src/components/Enter/Enter.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import styles from "./enter.module.scss";
|
||||
|
||||
const Enter = () => {
|
||||
return (
|
||||
<a className={styles["enterLink"]} href="/">
|
||||
ENTRAR
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export { Enter };
|
||||
14
src/components/Enter/enter.module.scss
Normal file
14
src/components/Enter/enter.module.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.enterLink {
|
||||
display: flex;
|
||||
width: 53px;
|
||||
height: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 105px;
|
||||
height: 33px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
284
src/components/FormInput/FormInput.tsx
Normal file
284
src/components/FormInput/FormInput.tsx
Normal file
@ -0,0 +1,284 @@
|
||||
import React from "react";
|
||||
import {
|
||||
useFormik,
|
||||
Formik,
|
||||
Form,
|
||||
Field,
|
||||
ErrorMessage,
|
||||
FormikHelpers,
|
||||
} from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
import styles from "./formInput.module.scss";
|
||||
|
||||
interface IFormikValues {
|
||||
nome: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
nascimento: string;
|
||||
tel: string;
|
||||
instagram: string;
|
||||
termos: boolean;
|
||||
}
|
||||
const FormInput = () => {
|
||||
const initialValues = {
|
||||
nome: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
nascimento: "",
|
||||
tel: "",
|
||||
instagram: "",
|
||||
termos: false,
|
||||
}; /*
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
nome: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
nascimento: "",
|
||||
tel: "",
|
||||
instagram: "",
|
||||
termos: false,
|
||||
},*/
|
||||
validationSchema: Yup.object({
|
||||
nome: Yup.string()
|
||||
.required("*Campo Obrigatório")
|
||||
.test(
|
||||
"is-full-name",
|
||||
"Please enter both your first and last name",
|
||||
function (value: any) {
|
||||
const nameArr = value.split(" ");
|
||||
return nameArr.length >= 2;
|
||||
}
|
||||
),
|
||||
email: Yup.string().required("*Campo Obrigatório"),
|
||||
cpf: Yup.string().required("*Campo Obrigatório"),
|
||||
nascimento: Yup.string().required("*Campo Obrigatório"),
|
||||
tel: Yup.string().required("*Campo Obrigatório"),
|
||||
instagram: Yup.string().required("*Campo Obrigatório"),
|
||||
termos: Yup.boolean().required("*").isTrue(),
|
||||
}); /*
|
||||
onSubmit: function (values) {
|
||||
alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}.
|
||||
Age: ${values.nascimento},${values.tel},${values.instagram}`);
|
||||
},
|
||||
});*/
|
||||
const validacao = Yup.object().shape({
|
||||
nome: Yup.string()
|
||||
.required("*Campo Obrigatório")
|
||||
.test(
|
||||
"Nome Completo",
|
||||
"Preencha com um nome e sobrenome válido.",
|
||||
function (value: any) {
|
||||
if (value === "" || value === undefined) {
|
||||
return false;
|
||||
} else {
|
||||
const nameArr = value.split(" ");
|
||||
return nameArr.length >= 2;
|
||||
}
|
||||
}
|
||||
),
|
||||
email: Yup.string().required("*Campo Obrigatório").email("E-mail inválido"),
|
||||
cpf: Yup.string()
|
||||
.required("*Campo Obrigatório")
|
||||
.test("cpf", "Preencha com um cpf válido.", function (value: any) {
|
||||
if (value === "" || value === undefined) {
|
||||
return false;
|
||||
} else {
|
||||
const cpfRegex = /^\d{3}\.\d{3}\.\d{3}\-\d{2}$/;
|
||||
const regex = new RegExp(cpfRegex);
|
||||
return regex.test(value);
|
||||
}
|
||||
}),
|
||||
nascimento: Yup.string()
|
||||
.required("*Campo Obrigatório")
|
||||
.test(
|
||||
"nascimento",
|
||||
"Preencha com uma data válida.",
|
||||
function (value: any) {
|
||||
if (value === "" || value === undefined) {
|
||||
return false;
|
||||
} else {
|
||||
const nascimentoRegex =
|
||||
"^(0[1-9]|[12][0-9]|3[01]).(0[1-9]|1[012]).[12][0-9]{3}$";
|
||||
const regex = new RegExp(nascimentoRegex);
|
||||
return regex.test(value);
|
||||
}
|
||||
}
|
||||
),
|
||||
tel: Yup.string()
|
||||
.required("*Campo Obrigatório")
|
||||
.test(
|
||||
"telefone",
|
||||
"Preencha com um telefone válido.",
|
||||
function (value: any) {
|
||||
if (value === "" || value === undefined) {
|
||||
return false;
|
||||
} else {
|
||||
const telefoneRegex =
|
||||
"^((\\+\\d{2}\\s)?\\(\\d{2}\\)\\s?\\d{4}\\d?\\-\\d{4})?$";
|
||||
const regex = new RegExp(telefoneRegex);
|
||||
return regex.test(value);
|
||||
}
|
||||
}
|
||||
),
|
||||
instagram: Yup.string(),
|
||||
termos: Yup.boolean().oneOf([true], "*"),
|
||||
});
|
||||
const handleFormikSubmit = (values: IFormikValues) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles["form-wrapper"]}>
|
||||
<h2>Preencha o formulário</h2>
|
||||
<Formik
|
||||
onSubmit={handleFormikSubmit}
|
||||
initialValues={initialValues}
|
||||
validationSchema={validacao}
|
||||
>
|
||||
{({ errors, touched }) => (
|
||||
<Form>
|
||||
<div className={styles["form-col"]}>
|
||||
<div className={styles["form-text"]}>
|
||||
<label htmlFor="nome">Nome</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="nome"
|
||||
className={styles["form-error"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
type="text"
|
||||
id="nome"
|
||||
name="nome"
|
||||
placeholder="Seu nome completo"
|
||||
className={errors.nome && touched.nome && "invalid"}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form-col"]}>
|
||||
<div className={styles["form-text"]}>
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={styles["form-error"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Seu e-mail"
|
||||
className={errors.email && touched.email && "invalid"}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form-col"]}>
|
||||
<div className={styles["form-text"]}>
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className={styles["form-error"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
type="text"
|
||||
id="cpf"
|
||||
name="cpf"
|
||||
placeholder="000.000.000-00"
|
||||
className={errors.cpf && touched.cpf && "invalid"}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form-col"]}>
|
||||
<div className={styles["form-text"]}>
|
||||
<label htmlFor="nascimento">Data de Nascimento:</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="nascimento"
|
||||
className={styles["form-error"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
type="text"
|
||||
id="nascimento"
|
||||
name="nascimento"
|
||||
placeholder="00.00.0000"
|
||||
className={errors.nascimento && touched.nascimento && "invalid"}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form-col"]}>
|
||||
<div className={styles["form-text"]}>
|
||||
<label htmlFor="tel">Telefone</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="tel"
|
||||
className={styles["form-error"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
type="text"
|
||||
id="tel"
|
||||
name="tel"
|
||||
placeholder="(00) 00000-0000"
|
||||
className={errors.tel && touched.tel && "invalid"}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form-col"]}>
|
||||
<div className={styles["form-text"]}>
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="instagram"
|
||||
className={styles["form-error"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
type="text"
|
||||
id="instagram"
|
||||
name="instagram"
|
||||
placeholder="@seuuser"
|
||||
className={errors.instagram && touched.instagram && "invalid"}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form-col"] && styles["form-check"]}>
|
||||
<div className={styles["form-text-check"]}>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="termos"
|
||||
className={styles["form-error"]}
|
||||
/>
|
||||
<label htmlFor="check">
|
||||
<a href="/">Declaro que li e aceito</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
type="checkbox"
|
||||
id="check"
|
||||
name="termos"
|
||||
className={
|
||||
errors.termos &&
|
||||
touched.termos &&
|
||||
"invalid" &&
|
||||
styles["form-checkbox"]
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<button className={styles["form-btn"]} type="submit">
|
||||
Cadastre-se
|
||||
</button>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FormInput };
|
||||
120
src/components/FormInput/formInput.module.scss
Normal file
120
src/components/FormInput/formInput.module.scss
Normal file
@ -0,0 +1,120 @@
|
||||
/*.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.textForm {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.errorFormik {
|
||||
margin-left: 80px;
|
||||
color: red;
|
||||
}
|
||||
*/
|
||||
.form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-wrapper h2 {
|
||||
font-weight: 700;
|
||||
font-size: 27px;
|
||||
margin: 0 0 12px 0;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
.form-wrapper form {
|
||||
width: 100%;
|
||||
}
|
||||
.form-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.form-col label {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #100d0e;
|
||||
margin: 0 0 4px 0;
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.form-col input {
|
||||
background: #ffffff;
|
||||
border: 1px solid #100d0e;
|
||||
border-radius: 25px;
|
||||
height: 46px;
|
||||
padding: 10px 0 15px 20px;
|
||||
&::placeholder {
|
||||
font-family: "Roboto";
|
||||
font-size: 14px;
|
||||
color: #b9b7b7;
|
||||
}
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 63px;
|
||||
&::placeholder {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper button {
|
||||
width: 100%;
|
||||
height: 52.44px;
|
||||
background: #000000;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
font-family: "Roboto";
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 400;
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 71px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
.form-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.form-error {
|
||||
color: red;
|
||||
}
|
||||
.form-check {
|
||||
display: flex;
|
||||
flex-direction: rows;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.form-check label {
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
margin-right: 5px;
|
||||
}
|
||||
.form-checkbox {
|
||||
}
|
||||
|
||||
#check {
|
||||
font-size: 15px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.form-btn {
|
||||
margin-top: 12px;
|
||||
}
|
||||
14
src/components/M3Logo/M3Logo.tsx
Normal file
14
src/components/M3Logo/M3Logo.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
|
||||
import styles from "./m3logo.module.scss";
|
||||
const M3Logo = () => {
|
||||
return (
|
||||
<img
|
||||
className={styles["M3LogoImg"]}
|
||||
src={m3LogoImg}
|
||||
alt="M3 Academy logo"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { M3Logo };
|
||||
9
src/components/M3Logo/assets/image/Logo-M3Academy.svg
Normal file
9
src/components/M3Logo/assets/image/Logo-M3Academy.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
6
src/components/M3Logo/m3logo.module.scss
Normal file
6
src/components/M3Logo/m3logo.module.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.M3LogoImg {
|
||||
width: 136px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 265px;
|
||||
}
|
||||
}
|
||||
80
src/components/NavigationBar/NavigationBar.tsx
Normal file
80
src/components/NavigationBar/NavigationBar.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
import { M3Logo } from "../M3Logo/M3Logo";
|
||||
import styles from "./navigationBar.module.scss";
|
||||
import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
|
||||
import { Cart } from "../Cart/Cart";
|
||||
import React, { useState } from "react";
|
||||
import { Link, Outlet } from "react-router-dom";
|
||||
import { Enter } from "../Enter/Enter";
|
||||
const NavigationBar = () => {
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
className="navbar navbar-expand-xpp bg-body-tertiary "
|
||||
id="navegador"
|
||||
>
|
||||
<div className="container-fluid">
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#navbarOffcanvasLg"
|
||||
aria-controls="navbarOffcanvasLg"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a className="navbar-brand" href="#">
|
||||
<img
|
||||
className="logoM3Img"
|
||||
src={m3LogoImg}
|
||||
alt="M3 Academy mobile"
|
||||
/>
|
||||
</a>
|
||||
<div className="carrinho-wrapper">
|
||||
<Cart />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="offcanvas offcanvas-end"
|
||||
id="navbarOffcanvasLg"
|
||||
aria-labelledby="navbarOffcanvasLgLabel"
|
||||
>
|
||||
<div className="offcanvas-header">
|
||||
<div className="entrar_wrapper">
|
||||
<Enter></Enter>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close text-reset"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/cursos">
|
||||
CURSOS
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/cursos">
|
||||
SAIBA MAIS
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/cursos">
|
||||
INSTITUCIONAIS
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { NavigationBar };
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
1
src/components/NavigationBar/navigationBar.module.scss
Normal file
1
src/components/NavigationBar/navigationBar.module.scss
Normal file
@ -0,0 +1 @@
|
||||
|
||||
19
src/components/Newsletter/Newsletter.tsx
Normal file
19
src/components/Newsletter/Newsletter.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import styles from "./newsletter.module.scss";
|
||||
const Newsletter = () => {
|
||||
return (
|
||||
<label className={styles["newsForm"]}>
|
||||
ASSINE NOSSA NEWSLETTER
|
||||
<div className={styles["newsForm-wrapper"]}>
|
||||
<input
|
||||
className={styles["newsForm-input"]}
|
||||
type="text"
|
||||
placeholder="E-mail"
|
||||
/>
|
||||
<button className={styles["newsForm-btn"]}>ENVIAR</button>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
export { Newsletter };
|
||||
53
src/components/Newsletter/newsletter.module.scss
Normal file
53
src/components/Newsletter/newsletter.module.scss
Normal file
@ -0,0 +1,53 @@
|
||||
.newsForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-variant: small-caps;
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 36px;
|
||||
}
|
||||
.newsForm-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.newsForm-input {
|
||||
margin-right: 8px;
|
||||
padding: 13px 16px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
width: 474px;
|
||||
height: 42px;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #c4c4c4;
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 636px;
|
||||
height: 59px;
|
||||
}
|
||||
}
|
||||
.newsForm-btn {
|
||||
width: 126px;
|
||||
height: 42px;
|
||||
background: #000000;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
padding: 14px 20px;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 246px;
|
||||
height: 59px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
27
src/components/Router/Router.tsx
Normal file
27
src/components/Router/Router.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import React from "react";
|
||||
import { Routes, Route, BrowserRouter } from "react-router-dom";
|
||||
import { Home } from "../../pages/Home";
|
||||
import { Teste } from "../../pages/Teste";
|
||||
import { Cursos } from "../../pages/Cursos";
|
||||
/*
|
||||
import Home from "./Home";
|
||||
import Sobre from "./Sobre";
|
||||
import Usuario from "./Usuario";
|
||||
<Route component={Home} path="/" exact />
|
||||
<Route component={Sobre} path="/sobre" />
|
||||
<Route component={Usuario} path="/usuario" />
|
||||
*/
|
||||
|
||||
const RoutesUrl = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Teste titulo={"home"} />}>
|
||||
<Route path="cursos" element={<Cursos titulo={"Cursos"} />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export { RoutesUrl };
|
||||
26
src/components/SearchBox/SearchBox.tsx
Normal file
26
src/components/SearchBox/SearchBox.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import styles from "./searchBox.module.scss";
|
||||
import searchImg from "./assets/image/search_2.png";
|
||||
const SearchBox = () => {
|
||||
return (
|
||||
<div className={styles["search-wrapper"]}>
|
||||
<input
|
||||
className={styles["search-input"]}
|
||||
id="title-name"
|
||||
name="title-name"
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
required
|
||||
/>
|
||||
<button className={styles["buscaBtn"]}>
|
||||
<img
|
||||
className={styles["searchImg"]}
|
||||
alt="Icone de busca"
|
||||
src={searchImg}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { SearchBox };
|
||||
BIN
src/components/SearchBox/assets/image/search_2.png
Normal file
BIN
src/components/SearchBox/assets/image/search_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 943 B |
64
src/components/SearchBox/searchBox.module.scss
Normal file
64
src/components/SearchBox/searchBox.module.scss
Normal file
@ -0,0 +1,64 @@
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.search-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 7px 16px;
|
||||
gap: 10px;
|
||||
width: 264px;
|
||||
height: 32px;
|
||||
|
||||
background: #ffffff;
|
||||
|
||||
border: 2px solid #f2f2f2;
|
||||
border-radius: 5px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 515.62px;
|
||||
height: 57px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 992px;
|
||||
height: 36px;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
}
|
||||
.buscaBtn {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-color: transparent;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
right: 30px;
|
||||
top: 5px;
|
||||
&::placeholder {
|
||||
color: #c4c4c4;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
&::placeholder {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
right: 30px;
|
||||
top: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchImg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
border-radius: 5px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,6 @@ import instagramImg from "./assets/images/Instagram.png";
|
||||
import twitterImg from "./assets/images/Twitter.png";
|
||||
import youtubeImg from "./assets/images/Youtube.png";
|
||||
import linkedinImg from "./assets/images/Linkedin.png";
|
||||
import whatsappImg from "./assets/images/whatsapp.png";
|
||||
|
||||
const Socials = () => {
|
||||
return (
|
||||
@ -26,9 +25,6 @@ const Socials = () => {
|
||||
<li className={styles["socials-item"]}>
|
||||
<img src={linkedinImg} alt="Linkedin" />
|
||||
</li>
|
||||
<li className={styles["socials-item"]}>
|
||||
<img src={whatsappImg} alt="Whatsapp" />
|
||||
</li>
|
||||
</ul>
|
||||
<a className={styles["siteLink"]} href="/">
|
||||
www.loremipsum.com
|
||||
|
||||
12
src/components/Whatsapp/Whatsapp.tsx
Normal file
12
src/components/Whatsapp/Whatsapp.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import whatsappImg from "./assets/image/whatsapp.png";
|
||||
|
||||
const Whatsapp = () => {
|
||||
return (
|
||||
<div>
|
||||
<img src={whatsappImg} alt="Whatsapp" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Whatsapp };
|
||||
BIN
src/components/Whatsapp/assets/image/whatsapp.png
Normal file
BIN
src/components/Whatsapp/assets/image/whatsapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
@ -1,14 +1,19 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./styles/main.scss";
|
||||
import { Home } from "./pages/Home";
|
||||
|
||||
import { Home } from "./pages/Home";
|
||||
import { Teste } from "./pages/Teste";
|
||||
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<Home />
|
||||
<BrowserRouter>
|
||||
<Home titulo={"home"}></Home>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
15
src/pages/Cursos.tsx
Normal file
15
src/pages/Cursos.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import { CursosBody } from "../sectors/Body/CursosBody";
|
||||
import { Caminhos } from "../components/Caminhos/Caminhos";
|
||||
import { Header } from "../sectors/Header/Header";
|
||||
const Cursos = (prop: { titulo: string }) => {
|
||||
return (
|
||||
<div>
|
||||
<Header></Header>
|
||||
<Caminhos titulo={prop.titulo}></Caminhos>
|
||||
<CursosBody></CursosBody>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Cursos };
|
||||
@ -1,10 +1,10 @@
|
||||
import React from "react";
|
||||
import { Socials } from "../components/Socials/Socials";
|
||||
import { Header } from "../sectors/Header/Header";
|
||||
|
||||
const Home = () => {
|
||||
const Home = (prop: { titulo: string }) => {
|
||||
return (
|
||||
<div>
|
||||
<Socials></Socials>
|
||||
<Header></Header>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
13
src/pages/Teste.tsx
Normal file
13
src/pages/Teste.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
import { Header } from "../sectors/Header/Header";
|
||||
import { Caminhos } from "../components/Caminhos/Caminhos";
|
||||
|
||||
const Teste = (prop: { titulo: string }) => {
|
||||
return (
|
||||
<div>
|
||||
<Caminhos titulo={prop.titulo}></Caminhos>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Teste };
|
||||
7
src/sectors/Body/CursosBody.tsx
Normal file
7
src/sectors/Body/CursosBody.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
const CursosBody = () => {
|
||||
return <h2>Cursos</h2>;
|
||||
};
|
||||
|
||||
export { CursosBody };
|
||||
14
src/sectors/Header/BottomHeader/BottomHeader.tsx
Normal file
14
src/sectors/Header/BottomHeader/BottomHeader.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { NavigationBar } from "../../../components/NavigationBar/NavigationBar";
|
||||
import { SearchBox } from "../../../components/SearchBox/SearchBox";
|
||||
const BottomHeader = () => {
|
||||
return (
|
||||
<div className="bottom_header">
|
||||
<NavigationBar></NavigationBar>
|
||||
<div className="search-wrapper">
|
||||
<SearchBox></SearchBox>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { BottomHeader };
|
||||
@ -1,10 +1,11 @@
|
||||
import React from "react";
|
||||
import { TopHeader } from "./TopHeader/TopHeader";
|
||||
|
||||
import { BottomHeader } from "./BottomHeader/BottomHeader";
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="header">
|
||||
<TopHeader />
|
||||
<BottomHeader></BottomHeader>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,40 +1,21 @@
|
||||
import React from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
import logoAcademy from "./assets/images/Logo-M3Academy 1.svg";
|
||||
import searchImg from "./assets/images/search_2.png";
|
||||
import cartImg from "./assets/images/cart_1.png";
|
||||
import { M3Logo } from "../../../components/M3Logo/M3Logo";
|
||||
|
||||
import { SearchBox } from "../../../components/SearchBox/SearchBox";
|
||||
import { Enter } from "../../../components/Enter/Enter";
|
||||
import { Cart } from "../../../components/Cart/Cart";
|
||||
const TopHeader = () => {
|
||||
return (
|
||||
<div className={styles["TopHeader"]}>
|
||||
<img
|
||||
className={styles["logoAcademyImg"]}
|
||||
alt="LogoM3Academy"
|
||||
src={logoAcademy}
|
||||
/>
|
||||
<div className={styles["search-wrapper"]}>
|
||||
<input
|
||||
className={styles["search-input"]}
|
||||
id="title-name"
|
||||
name="title-name"
|
||||
type="text"
|
||||
placeholder="Buscar"
|
||||
required
|
||||
/>
|
||||
<button className={styles["buscaBtn"]}>
|
||||
<img
|
||||
className={styles["searchImg"]}
|
||||
alt="LogoM3Academy"
|
||||
src={searchImg}
|
||||
/>
|
||||
</button>
|
||||
<div className="top_header">
|
||||
<M3Logo></M3Logo>
|
||||
<div className="search_box">
|
||||
<SearchBox></SearchBox>
|
||||
</div>
|
||||
<div className="sign_up">
|
||||
<Enter></Enter>
|
||||
<Cart></Cart>
|
||||
</div>
|
||||
<a className={styles["loginLink"]} href="/">
|
||||
ENTRAR
|
||||
</a>
|
||||
<a className={styles["cartLink"]} href="/">
|
||||
<img className={styles["cartImg"]} src={cartImg} alt="ImagemCarrinho" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.TopHeader {
|
||||
/*.TopHeader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -59,3 +59,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
@ -3,3 +3,7 @@
|
||||
@import "common/reset.scss";
|
||||
@import "partials/header.scss";
|
||||
@import "partials/container.scss";
|
||||
@import "utils/custom.scss";
|
||||
@import "partials/navigation.scss";
|
||||
@import "partials/top_header.scss";
|
||||
@import "partials/bottom_header.scss";
|
||||
|
||||
21
src/styles/partials/bottom_header.scss
Normal file
21
src/styles/partials/bottom_header.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.bottom_header {
|
||||
background: black;
|
||||
padding: 0 100px 0 64px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
@media screen and (max-width: 1025px) {
|
||||
padding: 0 16px 0 16px;
|
||||
}
|
||||
@media screen and (min-width: 1025px) {
|
||||
.search-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1025px) {
|
||||
.bottom_header {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search-wrapper {
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,4 @@
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 162px;
|
||||
background-color: $black100;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
58
src/styles/partials/navigation.scss
Normal file
58
src/styles/partials/navigation.scss
Normal file
@ -0,0 +1,58 @@
|
||||
@media screen and (min-width: 1025px) {
|
||||
.logoM3Img {
|
||||
display: none;
|
||||
}
|
||||
.carrinho-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.logoM3Img {
|
||||
width: 136px;
|
||||
}
|
||||
.nav-link {
|
||||
font-family: "Roboto";
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
&:hover {
|
||||
color: aqua;
|
||||
}
|
||||
.active {
|
||||
color: aquamarine;
|
||||
}
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
@media screen and (max-width: 1025px) {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
.bottom_header {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar-toggler-icon {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container-fluid {
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
.navbar-nav {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.offcanvas-header {
|
||||
background-color: black;
|
||||
}
|
||||
.btn-close {
|
||||
color: white;
|
||||
}
|
||||
.offcanvas {
|
||||
width: 100%;
|
||||
height: 585px;
|
||||
}
|
||||
}
|
||||
15
src/styles/partials/top_header.scss
Normal file
15
src/styles/partials/top_header.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.top_header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
padding: 22px 100px 22px 100px;
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.sign_up {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 55px;
|
||||
}
|
||||
20
src/styles/utils/custom.scss
Normal file
20
src/styles/utils/custom.scss
Normal file
@ -0,0 +1,20 @@
|
||||
// Custom.scss
|
||||
// Option A: Include all of Bootstrap
|
||||
|
||||
// Include any default variable overrides here (though functions won't be available)
|
||||
@import "/node_modules/bootstrap/scss/functions";
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
xsm: 362px,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xpp: 1025px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px,
|
||||
);
|
||||
|
||||
@import "/node_modules/bootstrap/scss/bootstrap.scss";
|
||||
|
||||
// Then add additional custom code here
|
||||
Loading…
Reference in New Issue
Block a user