Added last commiter

Author: leoronne

.gitignore

@@ -23,3 +23,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.firebaserc
+
+firebase.json
+
+/.firebase

src/pages/Repo/index.tsx

@@ -332,12 +332,30 @@ const Repo: React.FC = () => {
             ) : (
               <>
                 <div className="commiter">
-                  {/* {repoCommits[0]?.author?.avatar_url && <img src={repoCommits[0].author.avatar_url} alt={repoCommits[0].author.login} />}
-                  {repoCommits[0]?.author?.login && <span className="user">{repoCommits[0].author.login}</span>}
-                  {repoCommits[0]?.commit?.message && <span className="message">{repoCommits[0].commit.message}</span>} */}
-                  <img src="https://avatars0.githubusercontent.com/u/10172199?v=4" alt="Leonardo Ronne" />
-                  <span className="user">leoronne</span>
-                  <span className="message">Mensagem teste</span>
+                  {repoCommits[0]?.author?.avatar_url && (
+                    <a href={`/${repoCommits[0].author.login}`} data-tip={`Go to ${repoCommits[0].author.login} profile`} target="_blank" rel="noopener noreferrer">
+                      <img src={repoCommits[0].author.avatar_url} alt={repoCommits[0].author.login} />
+                    </a>
+                  )}
+                  {repoCommits[0]?.author?.login && (
+                    <span className="user">
+                      <a
+                        href={`https://github.com/${username}/${reponame}/commits?author=${repoCommits[0]?.author?.login}`}
+                        data-tip={`See commits from ${repoCommits[0].author.login}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {repoCommits[0].author.login}
+                      </a>
+                    </span>
+                  )}
+                  {repoCommits[0]?.commit?.message && (
+                    <span className="message">
+                      <a href={`https://github.com/${username}/${reponame}/commit/${repoCommits[0].sha}`} data-tip="See commit on GitHub" target="_blank" rel="noopener noreferrer">
+                        {repoCommits[0].commit.message}
+                      </a>
+                    </span>
+                  )}
                 </div>
                 <div className="commiter-sha">
                   <CheckIcon />

src/pages/Repo/styles.ts

@@ -187,14 +187,14 @@ export const RightSide = styled.div`
 
 export const RepoInfoHeader = styled.div`
   height: 50px;
-  padding: 5px;
+  padding: 10px;
   border: 1px solid var(--border);
   background-color: var(--repoHeader);
   position: absolute;
   width: 100%;
   top: 0;
   display: grid;
-  grid-template-columns: auto 100px 130px 120px;
+  grid-template-columns: auto 100px 140px 120px;
   grid-gap: 10px;
   align-items: center;
 
@@ -204,9 +204,26 @@ export const RepoInfoHeader = styled.div`
     padding-left: 5px;
   }
 
+  > .commiter {
+    display: flex;
+    align-items: center;
+    > a img {
+      max-width: 30px;
+      border-radius: 50%;
+    }
+    > .user {
+      font-weight: 600;
+    }
+    > span {
+      font-size: 16px;
+      margin-left: 15px;
+    }
+  }
+
   > .commiter-sha {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
     > svg {
       margin-top: 2px;
     }
@@ -221,11 +238,13 @@ export const RepoInfoHeader = styled.div`
     font-size: 16px;
     display: flex;
     align-items: center;
+    justify-content: flex-end;
   }
 
   > .number-commits {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
     > svg {
       margin-top: 2px;
     }