From 3ea66a1d2101c80f6939e4934bf8910c4af879ff Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 28 Dec 2022 19:46:11 -0300 Subject: [PATCH] feat(home): adicionando header no desktop home --- .editorconfig | 26 +++--- public/index.html | 72 ++++++++------- src/_variaveis.scss | 37 ++++++++ src/assets/imgs/cart-icon-header.png | Bin 0 -> 445 bytes src/assets/imgs/m3-acdemy-logo.png | Bin 0 -> 2933 bytes src/assets/imgs/search-icon-header.png | Bin 0 -> 439 bytes src/components/Header/Header.module.scss | 113 +++++++++++++++++++++++ src/components/Header/Header.tsx | 32 +++++++ src/index.tsx | 8 +- src/pages/Home.tsx | 7 +- 10 files changed, 240 insertions(+), 55 deletions(-) create mode 100644 src/_variaveis.scss create mode 100644 src/assets/imgs/cart-icon-header.png create mode 100644 src/assets/imgs/m3-acdemy-logo.png create mode 100644 src/assets/imgs/search-icon-header.png create mode 100644 src/components/Header/Header.module.scss create mode 100644 src/components/Header/Header.tsx diff --git a/.editorconfig b/.editorconfig index 9e434d8..8bc554c 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,13 +1,13 @@ -# EditorConfig is awesome: https://EditorConfig.org - -# top-most EditorConfig file -root = true - -[*] -indent_style = space -indent_size = 4 -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true -max_line_length = 100 +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +indent_style = space +indent_size = 4 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +max_line_length = 100 diff --git a/public/index.html b/public/index.html index 92aea43..6198ecc 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,45 @@ - - - - - - - - + - - + - React App - - - -
- - + To begin the development, run `npm start` or `yarn start`. + To create a production bundle, use `npm run build` or `yarn build`. + --> diff --git a/src/_variaveis.scss b/src/_variaveis.scss new file mode 100644 index 0000000..6c7ee19 --- /dev/null +++ b/src/_variaveis.scss @@ -0,0 +1,37 @@ +/* fonts */ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); +$font-family: 'Roboto', sans-serif; + +/* Colors */ +$color-black: #000; + +$color-white: #fff; +$color-primary-700: #F2F2F2; + +$color-primary-400: #C4C4C4; +$color-primary-500: #C6C6C6; + + + +/* Grid breakpoints */ +$grid-breakpoints: ( + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; + +$z-index: ( + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25 +) !default; + +//media-queries +$mq-desktop: "(min-width: 1025px) and (max-width: 2499px)"; +$mq-tablet: "(min-width: 491px) and (max-width: 1024px)"; +$mq-mobile: "(min-width: 280px) and (max-width: 490px)"; diff --git a/src/assets/imgs/cart-icon-header.png b/src/assets/imgs/cart-icon-header.png new file mode 100644 index 0000000000000000000000000000000000000000..80d780f132e34fed4bae7b4053920b142898b1c3 GIT binary patch literal 445 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 literal 0 HcmV?d00001 diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss new file mode 100644 index 0000000..eb76b02 --- /dev/null +++ b/src/components/Header/Header.module.scss @@ -0,0 +1,113 @@ +@import '../../_variaveis.scss'; + +.header-top { + width: calc(100% - 200px); + height: 32px; + padding: 22px 100px; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 10px; + border-bottom: 1px solid $color-primary-400; + background: $color-black; + + &__logo { + width: 136px; + height: 26px; + } + + &__input { + display: flex; + flex-direction: row; + align-items: center; + padding: 7px 16px; + gap: 10px; + + background: $color-white; + border: 2px solid $color-primary-700; + border-radius: 5px; + + width: 25%; + height: 12px; + + background-image: url("../../assets/imgs/search-icon-header.png"); + background-size: 18px; + background-repeat: no-repeat; + background-position: bottom 50% right 16px; + + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-primary-500; + + &::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-primary-500; + } + } + + &__log-cart { + display: flex; + align-items: center; + justify-content: center; + } + + &__log { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-white; + text-decoration: none; + + margin-right: 55px; + } + + &__cart { + width: 28px; + height: 28px; + } +} + +.header-bottom { + width: calc(100% - 200px); + height: 16px; + padding: 14px 100px; + background-color: $color-black; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + &__list { + list-style: none; + display: flex; + align-items: center; + justify-content: center; + + &__items-menu { + margin-right: 55px; + + a { + font-family: $font-family; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + text-decoration: none; + color: $color-white; + } + } + } +} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..fa8401d --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,32 @@ +import logo from '../../assets/imgs/m3-acdemy-logo.png' +import cart from '../../assets/imgs/cart-icon-header.png' + +import styles from './Header.module.scss' + +const Header = () => { + return ( +
+
+ Logo M3 + + +
+ +
+ ) +} + +export { Header } diff --git a/src/index.tsx b/src/index.tsx index 2bbb578..d3037ca 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,10 +4,10 @@ import './global.scss'; import { Home } from './pages/Home'; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById('root') as HTMLElement ); root.render( - - - + + + ); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 3ee860e..db863d9 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,11 +1,12 @@ import React from 'react'; + +import { Header } from '../components/Header/Header'; + import './Home.scss'; function Home() { return ( -
-

Iniciando Projeto

-
+
); }