Estilizando Detalhe

nivel-03/01-primeiro-projeto-com-react/src/pages/Repository/index.tsx

@@ -1,13 +1,67 @@
 import React from 'react';
-import { useRouteMatch } from 'react-router-dom';
+import { useRouteMatch, Link } from 'react-router-dom';
+import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+
+import logoImg from '../../assets/logo.svg';
+
+import { Header, RepositoryInfo, Issues } from './styles';
 
 interface RepositoryParams {
   repository: string;
 }
 
 const Dashboard: React.FC = () => {
   const { params } = useRouteMatch<RepositoryParams>();
-  return <div>Repository:{params.repository}</div>;
+
+  return (
+    <>
+      <Header>
+        <img src={logoImg} alt="GitHub Explorer" />
+        <Link to="/">
+          <FiChevronLeft size={16} />
+          Voltar
+        </Link>
+      </Header>
+
+      <RepositoryInfo>
+        <header>
+          <img
+            src="https://avatars0.githubusercontent.com/u/28929274?v=4"
+            alt="Rocketseat"
+          />
+          <div>
+            <strong>rocketseat/unform</strong>
+            <p>Descrição do repositório</p>
+          </div>
+        </header>
+        <ul>
+          <li>
+            <strong>1808</strong>
+            <span>Stars</span>
+          </li>
+          <li>
+            <strong>48</strong>
+            <span>Forks</span>
+          </li>
+          <li>
+            <strong>67</strong>
+            <span>Issues abertas</span>
+          </li>
+        </ul>
+      </RepositoryInfo>
+
+      <Issues>
+        <Link to="asdasd">
+          <div>
+            <strong>asdasdasd</strong>
+            <p>asdasdasd</p>
+          </div>
+
+          <FiChevronRight size={20} />
+        </Link>
+      </Issues>
+    </>
+  );
 };
 
 export default Dashboard;

nivel-03/01-primeiro-projeto-com-react/src/pages/Repository/styles.ts

@@ -0,0 +1,123 @@
+import styled from 'styled-components';
+
+export const Header = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #a8a8b3;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #666;
+    }
+
+    svg {
+      margin-right: 4px;
+    }
+  }
+`;
+
+export const RepositoryInfo = styled.section`
+  margin-top: 80px;
+
+  header {
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+    }
+
+    div {
+      margin-left: 24px;
+
+      strong {
+        font-size: 36px;
+        color: #3d3d4d;
+      }
+
+      p {
+        font-size: 18px;
+        color: #737380;
+        margin-top: 4px;
+      }
+    }
+  }
+
+  ul {
+    display: flex;
+    list-style: none;
+    margin-top: 40px;
+
+    li {
+      & + li {
+        margin-left: 80px;
+      }
+
+      strong {
+        display: block;
+        font-size: 36px;
+        color: #3d3d4d;
+      }
+
+      span {
+        display: block;
+        margin-top: 4px;
+        color: #6c6c80;
+      }
+    }
+  }
+`;
+
+export const Issues = styled.div`
+  margin-top: 80px;
+
+  a {
+    background: #fff;
+    border-radius: 5px;
+    width: 100%;
+    padding: 24px;
+    display: block;
+    text-decoration: none;
+
+    display: flex;
+    align-items: center;
+    transition: transform 0.2s;
+
+    & + a {
+      margin-top: 16px;
+    }
+
+    &:hover {
+      transform: translateX(10px);
+    }
+
+    div {
+      margin: 0 16px;
+      flex: 1;
+
+      strong {
+        font-size: 20px;
+        color: #3d3d4d;
+      }
+
+      p {
+        font-size: 18px;
+        color: #a8a8b3;
+        margin-top: 4px;
+      }
+    }
+
+    svg {
+      margin-left: auto;
+      color: #cbcbd6;
+    }
+  }
+`;