From 161a43f6cc17d8f8ceffc2886be32c6356909ff9 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 7 Jan 2023 20:26:58 -0300 Subject: [PATCH] feat(header): Cria o header top para desktop --- .../HeaderTop/HeaderTop.module.scss | 185 ++++++++++++++++++ src/components/HeaderTop/HeaderTop.tsx | 56 ++++++ src/components/HeaderTop/assets/cart.svg | 12 ++ .../assets/hamburger-menu-btn-icon.svg | 5 + .../HeaderTop/assets/logo-m3academy.png | Bin 0 -> 2931 bytes src/components/HeaderTop/assets/search.svg | 10 + src/pages/Home.module.scss | 14 ++ src/pages/Home.tsx | 10 +- 8 files changed, 291 insertions(+), 1 deletion(-) create mode 100644 src/components/HeaderTop/HeaderTop.module.scss create mode 100644 src/components/HeaderTop/HeaderTop.tsx create mode 100644 src/components/HeaderTop/assets/cart.svg create mode 100644 src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg create mode 100644 src/components/HeaderTop/assets/logo-m3academy.png create mode 100644 src/components/HeaderTop/assets/search.svg create mode 100644 src/pages/Home.module.scss diff --git a/src/components/HeaderTop/HeaderTop.module.scss b/src/components/HeaderTop/HeaderTop.module.scss new file mode 100644 index 0000000..776ddb1 --- /dev/null +++ b/src/components/HeaderTop/HeaderTop.module.scss @@ -0,0 +1,185 @@ +@use '../../variables'; + +.header-top { + border-bottom: 1px solid variables.$gray-400; + + @media (max-width: 1024px) { + border-bottom: none; + } + + &__wrapper { + display: grid; + grid-template-columns: 1fr minmax(264px, 24.4445%) 1fr; + padding: 22px 100px; + height: 76px; + + @media (min-width: 3600px) { + grid-template-columns: 1fr 700px 1fr; + height: 111px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + grid-template-columns: 1fr 515px 1fr; + height: 101px; + } + + @media ((min-width: 1900px) and (max-width: 2499px)) { + grid-template-columns: 1fr 415px 1fr; + } + } + + &__logo { + display: flex; + align-items: center; + justify-content: left; + + @media (max-width: 1024px) { + justify-content: center; + grid-area: 1/2; + } + + &__img { + width: 100%; + max-width: 136px; + + @media (min-width: 3600px) { + min-width: 290px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + min-width: 265px; + } + } + } + + &__search-bar { + display: flex; + justify-content: center; + align-items: center; + position: relative; + + &__input { + margin: 0 auto; + width: 100%; + min-width: 264px; + height: 32px; + background-color: variables.$white; + border: 2px solid variables.$gray-500; + border-radius: 5px; + padding: 12px 16px; + font-size: 14px; + line-height: 16px; + color: variables.$gray-300; + + @media (min-width: 3600px) { + max-width: 700px; + height: 62px; + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + max-width: 515px; + height: 57px; + font-size: 28px; + line-height: 33px; + } + + @media ((min-width: 1900px) and (max-width: 2499px)){ + max-width: 415px; + } + + &::placeholder { + font-size: 14px; + line-height: 16px; + color: variables.$gray-300; + + @media (min-width: 3600px) { + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 28px; + line-height: 33px; + } + } + + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } + } + + &__btn { + border: none; + background: transparent; + position: absolute; + top: 7px; + right: 16px; + + @media (min-width: 3600px) { + top: 16px; + bottom: 11px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)){ + top: 11px; + bottom: 11px; + } + + &__img { + + @media (min-width: 2500px) { + width: 100%; + min-width: 35px; + } + } + } + } + + &__menu { + display: flex; + align-items: center; + justify-content: right; + gap: 55px; + + &__login { + color: variables.$white; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + + &:hover { + filter: brightness(80%); + } + + @media (min-width: 3600px) { + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 28px; + line-height: 33px; + } + } + + &__btn-cart { + background: transparent; + border: none; + + &:hover { + filter: brightness(80%); + } + + &__img { + width: 100%; + max-width: 28px; + + @media (min-width: 2500px) { + min-width: 54px; + } + } + } + } +} diff --git a/src/components/HeaderTop/HeaderTop.tsx b/src/components/HeaderTop/HeaderTop.tsx new file mode 100644 index 0000000..bc75130 --- /dev/null +++ b/src/components/HeaderTop/HeaderTop.tsx @@ -0,0 +1,56 @@ +import {useState} from 'react'; + +import styles from "./HeaderTop.module.scss"; + +import imgLogo from "./assets/logo-m3academy.png"; +import imgCart from "./assets/cart.svg"; +import imgSearch from "./assets/search.svg"; + +const HeaderTop = () => { + + const [search, setSearch] = useState(""); + + const handleSearch = ({target}:any) =>{ + setSearch(target.value); + } + + const cleanSearch = () => setSearch(''); + + return ( +
+
+ + + + Logo M3 Academy + + + +
+ + + +
+ +
+ + Entrar + + + +
+
+
+ ); +} + +export {HeaderTop}; diff --git a/src/components/HeaderTop/assets/cart.svg b/src/components/HeaderTop/assets/cart.svg new file mode 100644 index 0000000..78ac70f --- /dev/null +++ b/src/components/HeaderTop/assets/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg b/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/HeaderTop/assets/logo-m3academy.png b/src/components/HeaderTop/assets/logo-m3academy.png new file mode 100644 index 0000000000000000000000000000000000000000..7f6b6ad2d94ac1c00a5ac6efa55d84bbf5f8144f GIT binary patch literal 2931 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 + + + + + + + + + diff --git a/src/pages/Home.module.scss b/src/pages/Home.module.scss new file mode 100644 index 0000000..6fc04aa --- /dev/null +++ b/src/pages/Home.module.scss @@ -0,0 +1,14 @@ +@use '../variables'; + +.header { + background-color: variables.$black; + height: 120px; + + @media (min-width: 3600px) { + height: 182px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + height: 162px; + } +} \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index cd6761d..18e007d 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,11 +1,19 @@ import React from 'react'; +import styles from "./Home.module.scss"; + +import { HeaderTop } from '../components/HeaderTop/HeaderTop'; + const Home = () => { return ( <> -
+
+ +
+
+ );