diff --git a/desafio-react-e-typescript/public/index.html b/desafio-react-e-typescript/public/index.html index 9c8ce9c..b50373f 100644 --- a/desafio-react-e-typescript/public/index.html +++ b/desafio-react-e-typescript/public/index.html @@ -2,22 +2,23 @@ + + + + - - - - - React App + Desafio React - -
diff --git a/desafio-react-e-typescript/src/App.tsx b/desafio-react-e-typescript/src/App.tsx index bb6917f..4ccd2c9 100644 --- a/desafio-react-e-typescript/src/App.tsx +++ b/desafio-react-e-typescript/src/App.tsx @@ -3,7 +3,8 @@ import React, { useState, useEffect } from "react"; import { Router } from "./router"; import "./App.scss"; -import { HeaderDesktop } from "./components/HeaderDesktop"; +import { HeaderDesktop } from "./components/Header/HeaderDesktop"; +import { HeaderMobile } from "./components/Header/HeaderMobile"; export function ScreenSize() { const [windowDimenion, detectHW] = useState({ @@ -24,7 +25,7 @@ export function ScreenSize() { }; }, [windowDimenion]); - return window.innerWidth > 1024 ? :

Hello World !

; + return window.innerWidth > 1024 ? : ; } export const App = () => { @@ -32,7 +33,7 @@ export const App = () => { ScreenSize(), ( <> - {window.innerWidth > 1024 ? :

Hello World !

} + {window.innerWidth > 1024 ? : }
diff --git a/desafio-react-e-typescript/src/assets/imgs/pngs/Logo-M3Academy.png b/desafio-react-e-typescript/src/assets/imgs/pngs/Logo-M3Academy.png deleted file mode 100644 index 779015f..0000000 Binary files a/desafio-react-e-typescript/src/assets/imgs/pngs/Logo-M3Academy.png and /dev/null differ diff --git a/desafio-react-e-typescript/src/assets/imgs/pngs/cart.png b/desafio-react-e-typescript/src/assets/imgs/pngs/cart.png deleted file mode 100644 index a84a5da..0000000 Binary files a/desafio-react-e-typescript/src/assets/imgs/pngs/cart.png and /dev/null differ diff --git a/desafio-react-e-typescript/src/assets/imgs/pngs/search 2.png b/desafio-react-e-typescript/src/assets/imgs/pngs/search 2.png deleted file mode 100644 index 7b8f948..0000000 Binary files a/desafio-react-e-typescript/src/assets/imgs/pngs/search 2.png and /dev/null differ diff --git a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss new file mode 100644 index 0000000..87eac18 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss @@ -0,0 +1,38 @@ +.HeaderDesktop { + display: flex; + justify-content: space-between; + padding: 22px 100px; + background: #000; + font-family: "Roboto", sans-serif; + + .m3LogoWrapper { + // width: 10.6%; + } + + .Search_Header_wrapper { + display: flex; + align-items: center; + width: 100%; + max-width: 515px; + .Search_Header { + width: 100%; + height: 57px; + border: 2px solid #f0f0f0; + border-radius: 5px; + } + } + .Headerlinks { + display: flex; + gap: 55px; + .EnterLink { + display: flex; + align-items: center; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + color: #fff; + text-decoration: none; + } + } +} diff --git a/desafio-react-e-typescript/src/components/HeaderDesktop.tsx b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx similarity index 64% rename from desafio-react-e-typescript/src/components/HeaderDesktop.tsx rename to desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx index 5abc9af..8f9a5e7 100644 --- a/desafio-react-e-typescript/src/components/HeaderDesktop.tsx +++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx @@ -1,14 +1,14 @@ import { NavLink } from "react-router-dom"; -import LogoM3 from "../assets/imgs/pngs/Logo-M3Academy.png"; -import CartIcon from "../assets/imgs/pngs/cart.png"; +import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_desktop.svg"; +import CartIcon from "../assets/imgs/SVGs/minicart_desktop.svg"; import "./HeaderDesktop.modules.scss"; export const HeaderDesktop = () => { return ( <> -
-
+
+
LogoM3 @@ -16,8 +16,8 @@ export const HeaderDesktop = () => {
-
- ENTRAR +
+ ENTRAR CartIcon diff --git a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss new file mode 100644 index 0000000..0097f10 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss @@ -0,0 +1,23 @@ +.HeaderMobile { + display: flex; + flex-direction: column; + padding: 25px 16px; + background: #000000; + + .topHeaderMobile { + display: flex; + justify-content: space-between; + padding-bottom: 25px; + } + + .Search_Header_wrapper { + width: 100%; + .Search_Header { + width: 100%; + height: 36px; + background: #ffffff; + border: 2px solid #f0f0f0; + border-radius: 5px; + } + } +} diff --git a/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx b/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx new file mode 100644 index 0000000..56592a1 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx @@ -0,0 +1,32 @@ +import { NavLink } from "react-router-dom"; +import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg"; +import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg"; +import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg"; + +import "./HeaderMobile.modules.scss"; + +export const HeaderMobile = () => { + return ( + <> +
+
+ {/* ENTRAR */} + +
+ + LogoM3 + +
+
+ + CartIcon + +
+
+
+ +
+
+ + ); +}; diff --git a/desafio-react-e-typescript/src/components/HeaderDesktop.modules.scss b/desafio-react-e-typescript/src/components/HeaderDesktop.modules.scss deleted file mode 100644 index 270c24d..0000000 --- a/desafio-react-e-typescript/src/components/HeaderDesktop.modules.scss +++ /dev/null @@ -1,24 +0,0 @@ -.Header { - display: flex; - justify-content: space-between; - padding: 0 100px; - background: #000000; - - .Search_Header_wrapper { - width: 100%; - .Search_Header { - width: 100%; - } - } - - @media (min-width: 1025px) { - padding: 22px 100px; - - .Search_Header_wrapper { - width: 100%; - .Search_Header { - width: 100%; - } - } - } -} diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Logo-M3Academy_desktop.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Logo-M3Academy_desktop.svg new file mode 100644 index 0000000..f57d95b --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Logo-M3Academy_desktop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Logo-M3Academy_mobile.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Logo-M3Academy_mobile.svg new file mode 100644 index 0000000..f83fef1 --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Logo-M3Academy_mobile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/MenuHamburguer.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/MenuHamburguer.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/MenuHamburguer.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/minicart_desktop.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/minicart_desktop.svg new file mode 100644 index 0000000..19dd15b --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/minicart_desktop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/minicart_mobile.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/minicart_mobile.svg new file mode 100644 index 0000000..165d30e --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/minicart_mobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/search 2.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/search 2.svg new file mode 100644 index 0000000..9455c4d --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/search 2.svg @@ -0,0 +1,10 @@ + + + + + + + + + +