contributors to learn page added

coderplex-org · vinaypuppal · Nov 1, 2017 · Oct 25, 2017 · Oct 25, 2017 · Oct 25, 2017
commit 9f5b33dc0c75dbe4e89ec64dfaa79527290fac5c
diff --git a/components/row-contributors.js b/components/row-contributors.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Card, Image, Icon, Header } from 'semantic-ui-react';
+
+export default props => (
+  <div className="main">
+    <Card fluid href={props.userPage}>
+      <div className="root">
+        <div className="profile">
+          <Header as="h4">
+            <Image shape="circular" src={props.userImage} />
+            <Header.Content>{props.userName}</Header.Content>
+          </Header>
+        </div>
+        <div className="stats">
+          {props.contributions.map((contribution, index) => {
+            const icon =
+              contribution.type === 'topic'
+                ? 'code'
+                : contribution.type === 'article' ? 'book' : 'film';
+            const valueVerb =
+              contribution.count === 1
+                ? contribution.type
+                : `${contribution.type}s`;
+            return (
+              <Header
+                key={index}
+                style={{ paddingRight: '30px', margin: '2rem 0 1rem' }}
+                as="h6"
+                icon
+              >
+                <Icon name={icon} />
+                <Header.Subheader
+                >{`${contribution.count} ${valueVerb}`}</Header.Subheader>
+              </Header>
+            );
+          })}
+        </div>
+      </div>
+    </Card>
+    <style jsx>{`
+      .main {
+        margin-bottom: 10px;
+      }
+      .root {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-content: center;
+        align-items: center;
+      }
+      .profile {
+        order: 0;
+        flex: 1 1 auto;
+        align-self: center;
+        padding: 20px;
+      }
+      .stats {
+        order: 0;
+        flex: 0 1 auto;
+        align-self: center;
+      }
+    `}</style>
+  </div>
+);
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
@@ -6,6 +6,7 @@ import publicPage from '../../hocs/public-page';
 import MarkedJS from '../../components/marked-js';
 import AccordGuide from '../../components/accord-guide';
 import { contentsOfLaravel } from '../../utils/mock-data';
+import RowContributors from '../../components/row-contributors';
 
 export default publicPage(
   class Subjects extends React.Component {
@@ -80,7 +81,15 @@ export default publicPage(
                     menuItem: 'Contributors',
                     render: () => (
                       <Tab.Pane attached={false}>
-                        {contentsOfLaravel.contributors[0].name}
+                        {contentsOfLaravel.contributors.map(contributor => (
+                          <RowContributors
+                            key={contributor.userPage}
+                            userPage={contributor.userPage}
+                            userName={contributor.userName}
+                            userImage={contributor.userImage}
+                            contributions={contributor.contributions}
+                          />
+                        ))}
                       </Tab.Pane>
                     ),
                   },

diff --git a/utils/mock-data.js b/utils/mock-data.js
@@ -190,8 +190,35 @@ export const contentsOfLaravel = {
   ],
   contributors: [
     {
-      name: 'P Bhanu Teja',
-      github: 'https://github.com/pbteja1998',
+      userName: 'P Bhanu Teja',
+      userPage: 'https://github.com/pbteja1998',
+      userImage: 'https://avatars0.githubusercontent.com/u/17903466?s=400&v=4',
+      contributions: [
+        {
+          type: 'topic',
+          count: '20',
+        },
+        {
+          type: 'article',
+          count: '30',
+        },
+        {
+          type: 'video',
+          count: '25',
+        },
+      ],
+    },
+    {
+      userName: 'M Zubair Ahmed',
+      userPage: 'https://github.com/M-ZubairAhmed',
+      userImage:
+        'https://avatars0.githubusercontent.com/u/17708702?s=400&u=032075b378bf6d82da48725b9ce5f31c7a6469fa&v=4',
+      contributions: [
+        {
+          type: 'topic',
+          count: '2',
+        },
+      ],
     },
   ],
 };