diff --git a/package-lock.json b/package-lock.json index ac791e9..1e5eb2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "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" } @@ -8603,6 +8604,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz", + "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14473,6 +14479,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", diff --git a/package.json b/package.json index 178045b..53857da 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "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" }, diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index aa069f2..6fbfae6 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,26 @@ + + - - - - - - React App + + + + Desafio 05 - +
- diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx index a53698a..6be6e79 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,25 +1,11 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React from "react"; +import { Header } from "./components/Header"; function App() { return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
+ <> +
+ ); } diff --git a/src/assets/images/header-cart.png b/src/assets/images/header-cart.png new file mode 100644 index 0000000..f3fc5d5 Binary files /dev/null and b/src/assets/images/header-cart.png differ diff --git a/src/assets/images/header-search.png b/src/assets/images/header-search.png new file mode 100644 index 0000000..3389a39 Binary files /dev/null and b/src/assets/images/header-search.png differ diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..d67c40d Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..23587b2 --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import "./styles.scss"; +import logo from "../../assets/images/logo.png"; +import cart from "../../assets/images/header-cart.png"; +import search from "../../assets/images/header-search.png"; + +const Header = () => { + return ( +
+
+
+
+ + Logo da M3 + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+ ); +}; + +export { Header }; diff --git a/src/components/Header/styles.scss b/src/components/Header/styles.scss new file mode 100644 index 0000000..50fddeb --- /dev/null +++ b/src/components/Header/styles.scss @@ -0,0 +1,152 @@ +.header { + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + background: var(--black-500); + + &__content { + width: 84.375%; + + &-top { + display: flex; + justify-content: center; + height: 76px; + + .logo, + .buttons { + height: 100%; + } + + .logo { + display: flex; + justify-content: center; + align-items: center; + + img { + width: 100%; + height: 25.86px; + cursor: pointer; + } + } + + .search-desktop { + display: flex; + flex-grow: 1; + justify-content: center; + align-items: center; + + &__input { + width: 28.668%; + height: 32px; + border: none; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + + &::placeholder { + padding: 8px 0 8px 16px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--gray-200); + } + } + + &__button { + width: 32px; + height: 32px; + border: none; + background: var(--white-500); + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + padding-right: 7px; + transition: 0.3s; + + &:hover { + filter: brightness(85%); + } + + img { + width: 18px; + height: 18px; + } + } + } + + .buttons { + display: flex; + justify-content: center; + align-items: center; + gap: 55px; + + &__logIn { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: var(--white-500); + background: transparent; + border: none; + transition: 0.3s; + + &:hover { + filter: brightness(80%); + } + } + + &__cart { + width: 28px; + height: 28px; + background: var(--black-500); + border: none; + transition: 0.3s; + + &:hover { + filter: brightness(85%); + } + + img { + width: 100%; + height: 100%; + } + } + } + } + } + + &__nav { + border-top: 1px solid var(--gray-100); + height: 44px; + display: flex; + justify-content: center; + width: 100%; + + nav { + display: flex; + align-items: center; + width: 84.375%; + } + + ul { + display: flex; + gap: 55px; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: var(--white-500); + + li { + cursor: pointer; + transition: 0.3s; + + &:hover { + filter: brightness(80%); + } + } + } + } +} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index 032464f..f7a2027 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,19 +1,13 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./styles/global.scss"; +import App from "./App"; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById("root") as HTMLElement ); root.render( ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts deleted file mode 100644 index 49a2a16..0000000 --- a/src/reportWebVitals.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/src/styles/global.scss b/src/styles/global.scss new file mode 100644 index 0000000..bbfdbb7 --- /dev/null +++ b/src/styles/global.scss @@ -0,0 +1,27 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; +} + +:root { + --white-500: #ffffff; + + --black-500: #000000; + + --gray-100: #c4c4c4; + --gray-200: #c6c6c6; +} + +a { + all: unset; +} + +ul { + list-style: none; +} + +button { + cursor: pointer; +}