feat(search component): cria a secao principal da aplicacao

package.json

@@ -27,7 +27,8 @@
   },
   "homepage": "https://github.com/leottx/react-github-user-search#readme",
   "dependencies": {
-    "nanoid": "^3.1.30"
+    "nanoid": "^3.1.30",
+    "polished": "^4.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",

src/assets/styles/header.js

@@ -8,7 +8,7 @@ export const HeaderContainer = styled.header`
   font-weight: 700;
 `;
 export const LogoLink = styled.a`
-  font-size: 3rem;
+  font-size: 2.4rem;
   cursor: pointer;
   transition-property: color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -20,7 +20,7 @@ export const LogoLink = styled.a`
 export const ThemeButton = styled.button`
   text-transform: uppercase;
   letter-spacing: 0.3em;
-  font-size: 1.6rem;
+  font-size: 1.4rem;
   display: flex;
   align-items: center;
   gap: 1rem;

src/assets/styles/main.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+import { darken } from 'polished';
+
+export const Main = styled.main``;
+
+export const SearchContainer = styled.header`
+  margin-bottom: 2.4rem;
+  background: var(--white);
+  border-radius: 1.5rem;
+  padding: 1rem;
+`;
+
+export const SearchForm = styled.form`
+  display: flex;
+  font-size: 1.4rem;
+  gap: 1rem;
+  justify-content: space-between;
+`;
+
+export const SearchField = styled.input.attrs({ type: 'text' })`
+  color: var(--txt-1);
+  min-width: 0;
+  border: transparent;
+  outline: none;
+  width: 100%;
+  &::placeholder {
+    color: var(--txt-2);
+  }
+`;
+
+export const SearchButton = styled.button`
+  background: var(--txt-5);
+  border-radius: 1rem;
+  padding: 0.8em 1em;
+  color: var(--white);
+  font-weight: 700;
+  margin-left: auto;
+  transition-property: 'background';
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  &:hover {
+    background: ${({ theme: { c } }) => darken(0.1, c.bgBtn)};
+  }
+`;
+
+export const Wrapper = styled.div`
+  gap: 1rem;
+  align-items: center;
+  display: flex;
+  flex-grow: 2;
+  svg {
+    color: var(--txt-5);
+  }
+`;

src/assets/styles/theme.js

@@ -0,0 +1,8 @@
+const theme = {
+  // CORES
+  c: {
+    bgBtn: '#266CFF',
+  },
+};
+
+export default theme;

src/components/App.js

@@ -4,6 +4,7 @@ import { Helmet } from 'react-helmet';
 // COMPONENTS
 import { Container } from '@Styles/global';
 import GitHeader from '@Components/GitHeader';
+import GitMain from '@Components/GitMain';
 
 // IMAGES
 import favicon from '@Images/favicon.svg';
@@ -20,6 +21,7 @@ const App = () => {
       </Helmet>
       <Container>
         <GitHeader />
+        <GitMain />
       </Container>
     </>
   );

src/components/GitHeader.js

@@ -8,7 +8,7 @@ const GitHeader = () => {
       <LogoLink>devfinder</LogoLink>
       <ThemeButton>
         Light
-        <MdWbSunny size={24} />
+        <MdWbSunny size={22} />
       </ThemeButton>
     </HeaderContainer>
   );

src/components/GitMain.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Main } from '@Styles/main';
+
+import GitSearch from '@Components/GitSearch';
+
+const GitMain = () => {
+  return (
+    <Main>
+      <GitSearch></GitSearch>
+    </Main>
+  );
+};
+
+export default GitMain;

src/components/GitSearch.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+// TEMA
+import theme from '@Styles/theme';
+
+// ICONES
+import { RiSearchLine } from 'react-icons/ri';
+
+// COMPONENTES
+import {
+  SearchContainer,
+  SearchForm,
+  SearchField,
+  SearchButton,
+  Wrapper,
+} from '@Styles/main';
+
+const GitSearch = () => {
+  return (
+    <SearchContainer>
+      <SearchForm>
+        <Wrapper>
+          <RiSearchLine size={30} />
+          <SearchField placeholder='Github username' />
+        </Wrapper>
+        <ThemeProvider theme={theme}>
+          <SearchButton>Search</SearchButton>
+        </ThemeProvider>
+      </SearchForm>
+    </SearchContainer>
+  );
+};
+
+export default GitSearch;