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 (
-
+ <>
+
+ >
);
}
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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+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;
+}