Added contributors page 🎉 (#1193)

* Added contributors page

* Updated contributors page

* Removed contributors.js file

* undo some changes

* clean up code

* undo more changes

* simplify transition

Co-authored-by: Mike Fix <mrfix84@gmail.com>

pages/about.js

@@ -1,6 +1,45 @@
 import React from 'react'
 import Page from '../components/Page'
 
+function Contributors() {
+  const [contributors, setContributors] = React.useState([])
+
+  React.useEffect(() => {
+    fetch('https://api.github.com/repos/carbon-app/carbon/contributors?per_page=100')
+      .then(response => response.json())
+      .then(contributors =>
+        setContributors(contributors.filter(contributor => !contributor.login.endsWith('[bot]')))
+      )
+  }, [])
+
+  return (
+    <div>
+      {contributors.map(contributor => (
+        <a key={contributor.id} href={contributor.html_url} target="_blank" rel="noreferrer">
+          <img alt={contributor.login} className="contributor" src={contributor.avatar_url} />
+        </a>
+      ))}
+      <style jsx>
+        {`
+          .contributor {
+            border-radius: 50%;
+            border: 2px solid white;
+            width: 32px;
+            height: 32px;
+            margin-right: 12px;
+            transition: all 300ms ease;
+            margin-bottom: 8px;
+          }
+
+          .contributor:hover {
+            opacity: 0.8;
+          }
+        `}
+      </style>
+    </div>
+  )
+}
+
 export default function About() {
   return (
     <Page>
@@ -127,6 +166,8 @@ export default function About() {
               Contributors welcome!
             </a>
           </p>
+          <br />
+          <Contributors />
         </div>
       </div>
       <style jsx>