From 81988e598885abba96bd329ce4890e9a6f947204 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Fri, 13 Jan 2023 23:15:45 -0300 Subject: [PATCH] feat: header e o seu responsivo finalizado. --- package-lock.json | 232 +++++++++++++++++- package.json | 5 +- public/index.html | 6 +- src/assets/svg/cart.svg | 12 + src/assets/svg/logo.svg | 9 + src/assets/svg/menu.svg | 5 + src/assets/svg/search.svg | 3 + src/components/Header/Form.tsx | 28 +++ src/components/Header/LogoM3.tsx | 8 + src/components/Header/Menu.tsx | 18 ++ src/components/Header/Nav.tsx | 27 ++ src/components/Header/User.tsx | 20 ++ src/global.css | 0 src/index.tsx | 4 +- src/pages/Header.tsx | 29 +++ src/pages/Home.tsx | 6 +- src/react-app-env.d.ts | 1 + src/styles/common/global.scss | 3 + src/styles/common/reset.scss | 5 + src/styles/font/font.scss | 1 + src/styles/partials/Form.module.scss | 36 +++ src/styles/partials/HeaderWrapper.module.scss | 20 ++ src/styles/partials/Menu.module.scss | 7 + src/styles/partials/Nav.module.scss | 27 ++ src/styles/partials/User.module.scss | 22 ++ src/styles/utils/all.scss | 4 + src/styles/utils/variables.scss | 11 + 27 files changed, 542 insertions(+), 7 deletions(-) create mode 100644 src/assets/svg/cart.svg create mode 100644 src/assets/svg/logo.svg create mode 100644 src/assets/svg/menu.svg create mode 100644 src/assets/svg/search.svg create mode 100644 src/components/Header/Form.tsx create mode 100644 src/components/Header/LogoM3.tsx create mode 100644 src/components/Header/Menu.tsx create mode 100644 src/components/Header/Nav.tsx create mode 100644 src/components/Header/User.tsx delete mode 100644 src/global.css create mode 100644 src/pages/Header.tsx create mode 100644 src/react-app-env.d.ts create mode 100644 src/styles/common/global.scss create mode 100644 src/styles/common/reset.scss create mode 100644 src/styles/font/font.scss create mode 100644 src/styles/partials/Form.module.scss create mode 100644 src/styles/partials/HeaderWrapper.module.scss create mode 100644 src/styles/partials/Menu.module.scss create mode 100644 src/styles/partials/Nav.module.scss create mode 100644 src/styles/partials/User.module.scss create mode 100644 src/styles/utils/all.scss create mode 100644 src/styles/utils/variables.scss diff --git a/package-lock.json b/package-lock.json index 922bb39..17620cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,11 +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-scripts": "5.0.1", + "sass": "^1.57.1", "typescript": "^4.9.4", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" } }, "node_modules/@adobe/css-tools": { @@ -3774,6 +3777,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", @@ -7945,6 +7953,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", @@ -8345,6 +8389,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", @@ -8626,6 +8683,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -11428,6 +11490,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", @@ -11753,6 +11820,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", @@ -13655,6 +13727,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", @@ -13964,6 +14041,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", @@ -14509,6 +14591,22 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -15491,6 +15589,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", @@ -15523,6 +15626,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", @@ -16836,6 +16944,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": { @@ -19398,6 +19523,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", @@ -22481,6 +22611,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", @@ -22752,6 +22908,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", @@ -22962,6 +23133,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.17.tgz", "integrity": "sha512-+hBruaLSQvkPfxRiTLK/mi4vLH+/VQS6z2KJahdoxlleFOI8ARqzOF17uy12eFDlqWmPoygwc5evgwcp+dlHhg==" }, + "immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -24975,6 +25151,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", @@ -25220,6 +25401,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", @@ -26404,6 +26590,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", @@ -26626,6 +26817,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", @@ -27009,6 +27205,16 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -27752,6 +27958,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", @@ -27775,6 +27986,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", @@ -28778,6 +28994,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/package.json b/package.json index 63c3a88..fc2b8db 100644 --- a/package.json +++ b/package.json @@ -10,11 +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-scripts": "5.0.1", + "sass": "^1.57.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/public/index.html b/public/index.html index f6082d1..e898449 100644 --- a/public/index.html +++ b/public/index.html @@ -5,8 +5,10 @@ - - React App + + + + Desafio React e TypeScript diff --git a/src/assets/svg/cart.svg b/src/assets/svg/cart.svg new file mode 100644 index 0000000..4a06258 --- /dev/null +++ b/src/assets/svg/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg new file mode 100644 index 0000000..cb6e6c7 --- /dev/null +++ b/src/assets/svg/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svg/menu.svg b/src/assets/svg/menu.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/svg/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/search.svg b/src/assets/svg/search.svg new file mode 100644 index 0000000..9f9b9f0 --- /dev/null +++ b/src/assets/svg/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Header/Form.tsx b/src/components/Header/Form.tsx new file mode 100644 index 0000000..046ccd6 --- /dev/null +++ b/src/components/Header/Form.tsx @@ -0,0 +1,28 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleForm from "../../styles/partials/Form.module.scss"; + +// Imagem +import search from "../../assets/svg/search.svg"; + +const Form = () => { + return ( +
+ + + +
+ ); +}; + +export { Form }; diff --git a/src/components/Header/LogoM3.tsx b/src/components/Header/LogoM3.tsx new file mode 100644 index 0000000..97aa835 --- /dev/null +++ b/src/components/Header/LogoM3.tsx @@ -0,0 +1,8 @@ +// Imagem +import logoM3 from "../../assets/svg/logo.svg"; + +const LogoM3 = () => { + return M3 Academy; +}; + +export { LogoM3 }; diff --git a/src/components/Header/Menu.tsx b/src/components/Header/Menu.tsx new file mode 100644 index 0000000..86666b8 --- /dev/null +++ b/src/components/Header/Menu.tsx @@ -0,0 +1,18 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleMenu from "../../styles/partials/Menu.module.scss"; + +// Imagens +import menu from "../../assets/svg/menu.svg"; + +const Menu = () => { + return ( +
+ Menu +
+ ); +}; + +export { Menu }; diff --git a/src/components/Header/Nav.tsx b/src/components/Header/Nav.tsx new file mode 100644 index 0000000..480aac1 --- /dev/null +++ b/src/components/Header/Nav.tsx @@ -0,0 +1,27 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleNav from "../../styles/partials/Nav.module.scss"; + +const Nav = () => { + return ( + + ); +}; + +export { Nav }; diff --git a/src/components/Header/User.tsx b/src/components/Header/User.tsx new file mode 100644 index 0000000..30bf267 --- /dev/null +++ b/src/components/Header/User.tsx @@ -0,0 +1,20 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleUser from "../../styles/partials/User.module.scss"; + +// Imagem +import cart from "../../assets/svg/cart.svg"; + +const User = () => { + return ( +
+

Entrar

+ + Carrinho +
+ ); +}; + +export { User }; diff --git a/src/global.css b/src/global.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/index.tsx b/src/index.tsx index fd48c63..00f5705 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,8 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import "./global.css"; + +import "./styles/utils/all.scss"; + import { Home } from "./pages/Home"; const root = ReactDOM.createRoot( diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx new file mode 100644 index 0000000..6355e56 --- /dev/null +++ b/src/pages/Header.tsx @@ -0,0 +1,29 @@ +// Bibliotecas +import React from "react"; + +// Componentes +import { Menu } from "../components/Header/Menu"; +import { LogoM3 } from "../components/Header/LogoM3"; +import { Form } from "../components/Header/Form"; +import { User } from "../components/Header/User"; +import { Nav } from "../components/Header/Nav"; + +// Estilos +import styleHeaderWrapper from "../styles/partials/HeaderWrapper.module.scss"; + +const Header = () => { + return ( +
+
+ + +
+ +
+ +
+ ); +}; + +export { Header }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 290e76d..d8c7f9a 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,7 +1,9 @@ import React from "react"; +import { Header } from "./Header"; + function Home() { - return
; + return
; } -export { Home }; \ No newline at end of file +export { Home }; diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/styles/common/global.scss b/src/styles/common/global.scss new file mode 100644 index 0000000..6aec588 --- /dev/null +++ b/src/styles/common/global.scss @@ -0,0 +1,3 @@ +body { + font-family: "Roboto"; +} diff --git a/src/styles/common/reset.scss b/src/styles/common/reset.scss new file mode 100644 index 0000000..9c81a26 --- /dev/null +++ b/src/styles/common/reset.scss @@ -0,0 +1,5 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} \ No newline at end of file diff --git a/src/styles/font/font.scss b/src/styles/font/font.scss new file mode 100644 index 0000000..76503ea --- /dev/null +++ b/src/styles/font/font.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); \ No newline at end of file diff --git a/src/styles/partials/Form.module.scss b/src/styles/partials/Form.module.scss new file mode 100644 index 0000000..10535e6 --- /dev/null +++ b/src/styles/partials/Form.module.scss @@ -0,0 +1,36 @@ +.header-form { + position: relative; + + @media (max-width: 1024px) { + display: grid; + grid-column: 1 / -1; + grid-row: 2; + } + + .header-search { + height: 32px; + width: 264px; + border-radius: 5px; + padding: 7px 16px 7px 16px; + outline: 0; + border: 2px solid #f2f2f2; + + @media (max-width: 1024px) { + width: 100%; + } + + &::placeholder { + font-weight: 400; + color: #c4c4c4; + } + } + + .header-search-icon { + position: absolute; + background-color: transparent; + right: 17px; + bottom: 4px; + border: 0; + cursor: pointer; + } +} diff --git a/src/styles/partials/HeaderWrapper.module.scss b/src/styles/partials/HeaderWrapper.module.scss new file mode 100644 index 0000000..651ac7e --- /dev/null +++ b/src/styles/partials/HeaderWrapper.module.scss @@ -0,0 +1,20 @@ +.header { + display: flex; + justify-content: space-between; + height: 76px; + width: 100%; + align-items: center; + border-bottom: 1px solid #c4c4c4; + padding: 0 100px; + background-color: #000000; + + @media (max-width: 1024px) { + display: grid; + grid-template-columns: repeat(3, max-content); + grid-template-rows: repeat(2, 1fr); + gap: 21px; + height: auto; + padding: 25px 16px; + } +} + diff --git a/src/styles/partials/Menu.module.scss b/src/styles/partials/Menu.module.scss new file mode 100644 index 0000000..1404bd4 --- /dev/null +++ b/src/styles/partials/Menu.module.scss @@ -0,0 +1,7 @@ +.header-menu { + display: none; + + @media (max-width: 1024px) { + display: flex; + } +} \ No newline at end of file diff --git a/src/styles/partials/Nav.module.scss b/src/styles/partials/Nav.module.scss new file mode 100644 index 0000000..01c4621 --- /dev/null +++ b/src/styles/partials/Nav.module.scss @@ -0,0 +1,27 @@ +.header-nav { + padding: 14px 100px; + background-color: #000; + text-decoration: none; + + @media (max-width: 1024px) { + display: none; + } + + ul { + display: flex; + list-style: none; + } + + li { + margin-right: 25px; + } + + a { + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-transform: uppercase; + color: #fff; + text-decoration: none; + } +} diff --git a/src/styles/partials/User.module.scss b/src/styles/partials/User.module.scss new file mode 100644 index 0000000..79905ad --- /dev/null +++ b/src/styles/partials/User.module.scss @@ -0,0 +1,22 @@ +.header-user { + display: flex; + align-items: center; + + p { + color: #fff; + margin-right: 55px; + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-transform: uppercase; + cursor: pointer; + + @media (max-width: 1024px) { + display: none; + } + } + + img { + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/styles/utils/all.scss b/src/styles/utils/all.scss new file mode 100644 index 0000000..b2f54e3 --- /dev/null +++ b/src/styles/utils/all.scss @@ -0,0 +1,4 @@ +@import "../common/reset.scss"; +@import "../common/global.scss"; +@import "../font/font.scss"; +@import "./variables.scss"; \ No newline at end of file diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000..5919a43 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,11 @@ +$black: #000000; +$white: #ffffff; +$primary-900: #ff0000; +$primary-800: #f9f9f9; +$primary-700: #f2f2f2; +$primary-600: #c4c4c4; +$primary-500: #c6c6c6; +$primary-400: #919191; +$primary-300: #5e5e5e; +$primary-200: #303030; +$primary-100: #5200ff;