refactor: posicionando os itens corretamente no header

alem de posicionar os icones, agora a lupa também é clicavel e quando esse evento ocorro ou a tecla enter é pressionada na caixa de pesquisa uam função é chamada
ieeeifpbcg · Mar 23, 2020 · 8450dfb · 8450dfb
1 parent 87a1c1a
commit 8450dfb
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 55 deletions.
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -6,27 +6,50 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import SearchIcon from '~/assets/icons/search-icon.svg';
 
 import { HeaderSC, SearchBox } from './styles';
+import { theme } from '~/styles/theme';
 
 function Header() {
   const [text, setText] = useState('');
+  const [isOpen, setIsOpen] = useState(0);
+  const [icon, setIcon] = useState(theme.primary.text);
+  const [searchBox, setSearchBox] = useState(theme.primary.fill);
+
+  function search() {
+    if (!isOpen) {
+      setIsOpen(400);
+      setIcon(theme.primary.fill);
+      setSearchBox(theme.primary.text);
+      return;
+    }
+
+    alert(text);
+  }
 
   return (
     <HeaderSC>
-      <div>
+      <div className="title">
         <h1>
           Collab Branch
           <br />
           Mapeamento IFPB-CG
         </h1>
       </div>
-      <SearchBox>
+
+      <SearchBox width={`${isOpen}px`} icon={icon} searchBox={searchBox}>
         <input
+          type="text"
           value={text}
           onChange={e => setText(e.target.value)}
+          onKeyDown={e => {
+            if (e.which === 13) search();
+          }}
           placeholder="Pesquise..."
         />
-        <SearchIcon />
+        <button type="button" onClick={search}>
+          <SearchIcon />
+        </button>
       </SearchBox>
+
       <div>
         <FontAwesomeIcon icon={faBars} />
       </div>

diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
@@ -4,83 +4,56 @@ import { theme } from '~/styles/theme';
 
 export const HeaderSC = styled.header`
   display: flex;
-  justify-content: space-around;
+  justify-content: flex-end;
   align-items: center;
   position: fixed;
   width: 100%;
-  height: 80px;
+  height: 120px;
   background-color: ${theme.primary.fill};
   z-index: 10;
 
-  header > div {
-    text-align: right;
-    padding: 0 5px 0 5px;
+  .title {
+    margin: 0 auto 0 380px;
+    min-width: 300px;
   }
 
   .fa-bars {
     font-size: 2em;
     color: ${theme.primary.text};
+    margin: 0 380px 0 70px;
   }
 `;
 
 export const SearchBox = styled.div`
-  position: relative;
-  display: block;
-  width: 100%;
-  max-width: 53px;
-  transition: 0.4s linear;
-  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+
+  height: 64px;
 
   input {
-    display: block;
     appearance: none;
-    width: 100%;
+    width: ${({ width }) => width};
 
+    background-color: ${({ searchBox }) => searchBox};
     border: none;
     outline: none;
-    border-radius: 15px;
-
-    background-color: ${theme.primary.fill};
-
+    border-radius: 15px 0 0 15px;
     padding: 15px;
-    color: ${theme.primary.fill};
-    font-size: 20px;
-    cursor: pointer;
-    transition: 0.6s linear;
-
-    &::placeholder {
-      color: ${theme.primary.fill};
-    }
+    color: ${theme.primary.active};
+    font-size: 24px;
+    line-height: 36px;
+    transition: 0.4s linear;
   }
 
-  svg {
-    position: absolute;
-    right: calc(53px / 2);
-    top: 50%;
-    transform: translate(50%, -50%);
-
-    pointer-events: none;
-
-    path {
-      fill: ${theme.primary.text};
-      transition: 0.6s linear;
-    }
-  }
-
-  &:focus-within {
-    max-width: 500px;
-
-    input {
-      background-color: ${theme.primary.text};
-      padding-right: 50px;
-      cursor: text;
-    }
+  button {
+    background-color: ${({ searchBox }) => searchBox};
+    border: 0;
+    padding: 0 10px 0 10px;
+    cursor: pointer;
+    border-radius: 0 15px 15px 0;
 
-    svg {
-      cursor: pointer;
-      path {
-        fill: ${theme.primary.fill};
-      }
+    svg path {
+      fill: ${({ icon }) => icon};
     }
   }
 `;