From 17cedd0faca7de0e91bf986c02ac38e92610a15c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Wed, 4 Jan 2023 23:35:37 -0300 Subject: [PATCH] feat: Adiciona header top --- react-project/src/assets/images/svgs/cart.svg | 12 +++ react-project/src/assets/images/svgs/logo.svg | 9 +++ .../src/assets/images/svgs/logo4k.svg | 9 +++ .../src/assets/images/svgs/search.svg | 10 +++ .../assets/styles/modules/Header.module.scss | 76 +++++++++++++++++++ .../src/assets/styles/variables.scss | 2 + react-project/src/components/Header.tsx | 60 ++++++++++++++- 7 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 react-project/src/assets/images/svgs/cart.svg create mode 100644 react-project/src/assets/images/svgs/logo.svg create mode 100644 react-project/src/assets/images/svgs/logo4k.svg create mode 100644 react-project/src/assets/images/svgs/search.svg create mode 100644 react-project/src/assets/styles/modules/Header.module.scss diff --git a/react-project/src/assets/images/svgs/cart.svg b/react-project/src/assets/images/svgs/cart.svg new file mode 100644 index 0000000..fd775ad --- /dev/null +++ b/react-project/src/assets/images/svgs/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/react-project/src/assets/images/svgs/logo.svg b/react-project/src/assets/images/svgs/logo.svg new file mode 100644 index 0000000..7f767d8 --- /dev/null +++ b/react-project/src/assets/images/svgs/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/assets/images/svgs/logo4k.svg b/react-project/src/assets/images/svgs/logo4k.svg new file mode 100644 index 0000000..f57d95b --- /dev/null +++ b/react-project/src/assets/images/svgs/logo4k.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/assets/images/svgs/search.svg b/react-project/src/assets/images/svgs/search.svg new file mode 100644 index 0000000..4374b77 --- /dev/null +++ b/react-project/src/assets/images/svgs/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/react-project/src/assets/styles/modules/Header.module.scss b/react-project/src/assets/styles/modules/Header.module.scss new file mode 100644 index 0000000..01d9d1f --- /dev/null +++ b/react-project/src/assets/styles/modules/Header.module.scss @@ -0,0 +1,76 @@ +header { + background-color: var(--black); + display: flex; + flex-direction: column; + color: var(--white); + + .spread { + border-bottom: 1px solid var(--gray-100); + } + + .header { + margin-left: 100px; + margin-right: 100px; + display: flex; + justify-content: space-between; + padding: 22px 0; + align-items: center; + + a { + display: contents; + + figure { + display: contents; + } + } + + &__search { + form { + position: relative; + + input { + padding: 8px 44px 8px 16px; + background-color: var(--white); + border: 2px solid var(--gray-500); + border-radius: 5px; + color: var(--gray-600); + font-weight: 400; + font-size: 14px; + line-height: 16px; + width: 264px; + height: 32px; + + &::placeholder { + color: var(--gray-600); + } + } + + button { + position: absolute; + top: 6px; + right: 16px; + border: 0; + background-color: var(--white); + cursor: pointer; + } + } + } + + &__account { + display: flex; + align-items: center; + gap: 55px; + + &__login { + color: var(--white); + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + } + } + + .menu { + display: flex; + } +} diff --git a/react-project/src/assets/styles/variables.scss b/react-project/src/assets/styles/variables.scss index b14bee3..cf335db 100644 --- a/react-project/src/assets/styles/variables.scss +++ b/react-project/src/assets/styles/variables.scss @@ -12,6 +12,8 @@ --gray-200: #7d7d7d; --gray-300: #e5e5e5; --gray-400: #b9b7b7; + --gray-500: #f2f2f2; + --gray-600: #c6c6c6; --red-100: #ff0000; diff --git a/react-project/src/components/Header.tsx b/react-project/src/components/Header.tsx index b4c852b..f13a8bf 100644 --- a/react-project/src/components/Header.tsx +++ b/react-project/src/components/Header.tsx @@ -1,7 +1,63 @@ -import React from "react"; +import header from "../assets/styles/modules/Header.module.scss"; + +import { Formik, Form, Field, ErrorMessage } from "formik"; + +//IMAGES +import logo from "../assets/images/svgs/logo.svg"; +import search from "../assets/images/svgs/search.svg"; +import cart from "../assets/images/svgs/cart.svg"; + +interface ISearchType { + search: string; +} const Header = () => { - return
Header
; + return ( +
+
+
+ +
+ Logo M3 Academy +
+ + +
+ { + actions.resetForm(); + }} + initialValues={{ search: "" }} + > +
+ + + +
+
+ +
+ + ENTRAR + + +
+ Carrinho de compras +
+ +
+
+
+ +
+
a
+
b
+
c
+
+
+ ); }; export { Header };