project file

src/App.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Routes from './routes'
+import GlobalStyle from './styles/global'
+
+function App() {
+  return (
+    <>
+      <Routes />
+      <GlobalStyle />
+    </>
+  );
+}
+
+export default App;

src/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+

src/pages/Main/index.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+
+import logo from '../../assets/footerLogo.png';
+import api from '../../services/api';
+
+import { Container } from './styles';
+
+export default function Main() {
+  const [data, setData] = useState([]);
+
+
+  useEffect(() => {
+    async function fecthData() {
+      const result = await api.get('/oportunidades.json');
+
+      setData(result.data);
+    }
+
+    fecthData();
+
+  }, []);
+
+  return (
+    <Container>
+      <header>
+        <h3>Vagas: Trampo.co & Lorem Ipsum SID</h3>
+      </header>
+      <ul>
+
+        {data.map(trampo => (
+          <a href={trampo.opportunity.permalink} target="_blank" rel="noopener noreferrer">
+            <li key={trampo.opportunity.id}>
+              <div>
+                <h3>{trampo.opportunity.name}</h3>
+                <p>{trampo.opportunity.company_name}</p>
+              </div>
+            </li>
+          </a>
+        ))}
+
+      </ul>
+      <footer>
+        <img src={logo} alt="Logo Footer" />
+      </footer>
+    </Container>
+  );
+}

src/pages/Main/styles.js

@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+
+  header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 413px;
+    height: 55px;
+    background-color: #241f1d;
+    text-indent: 24px;
+    color: #fff;
+
+    h3 {
+      margin-left: 6px;
+      font-size: 15px;
+      text-transform: uppercase;
+    }
+  }
+
+  ul {
+    list-style: none;
+    height: 220px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    ::-webkit-scrollbar-track {
+      background: #55504d;
+    }
+
+    ::-webkit-scrollbar {
+      width: 6px;
+      background: #dcdcdc;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #dcdcdc;
+    }
+  }
+
+  li {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-transform: uppercase;
+    color: #fff;
+    width: 407px;
+    height: 55px;
+    background: #2b2623;
+    border-left: 6px solid #dfc125;
+    border-bottom: 1px solid #38322f;
+
+    &:hover {
+      background: #38322f;
+    }
+  }
+
+  div {
+    margin-left: 24px;
+  }
+
+  a {
+    text-decoration: none;
+
+    h2 {
+      font-size: 16px;
+    }
+
+    p {
+      font-size: 10px;
+    }
+  }
+
+  footer {
+    width: 413px;
+    height: 52px;
+    background: #241f1d;
+    text-indent: 24px;
+
+    img {
+      margin-top: 12px;
+    }
+  }
+`;

src/routes.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { BrowserRouter, Switch, Route } from 'react-router-dom'
+
+import Main from './pages/Main'
+
+export default function Routes() {
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route path='/' exact component={Main} />
+      </Switch>
+    </BrowserRouter>
+  )
+}

src/services/api.js

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: 'http://trampos.co/api',
+})
+
+export default api;

src/styles/global.js

@@ -0,0 +1,24 @@
+import { createGlobalStyle } from 'styled-components';
+
+export default createGlobalStyle`
+  * {
+    margin: 0;
+    padding: 0;
+    outline: 0;
+    box-sizing: border-box;
+  }
+  html, body, #root {
+    min-height: 100%;
+  }
+  body {
+    background: #fff;
+    -webkit-font-smoothing: antialiased !important;
+  }
+  body, input, button {
+    font-size: 14px;
+    font-family: "MS Sans Serif";
+  }
+  button {
+    cursor: pointer;
+  }
+`;