#17 add icons to card

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@githubprimer/octicons-react": "^8.1.0",
     "axios": "^0.18.0",
     "i": "^0.3.6",
     "node-sass": "^4.9.3",

src/features/Issues/Issues.js

@@ -3,13 +3,26 @@ import './Issues.scss';
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux';
 import { getIssues, filterIssues } from './actions';
+import Octicon, { iconsByName } from '@githubprimer/octicons-react'
 
 const maxLength = 50;
 
-const Card = ({ title, body, labels, issueUrl, owner, repo, number }) => (
-  <div className="card" onClick={() => issueUrl(owner, repo, number)}>
+const Card = ({title, body, labels, issueUrl, owner, repo, number, closed}) =>
+<div className="card" onClick={() => issueUrl(owner, repo, number)}>
     <div className="card-title">
       <h4>{title}</h4>
+      <span className={`card-status-icon ${closed ? 'closed' : 'open'}`}>
+        {closed ?
+          <Octicon
+          icon={iconsByName["issue-closed"]}
+          size="24"
+          /> :
+          <Octicon
+          icon={iconsByName["issue-opened"]}
+          size="24"
+          />
+        }
+      </span>
     </div>
     <div className="card-body">
       <div>
@@ -94,16 +107,17 @@ class Issues extends Component {
           </ul>
         </div>
         <div className="issues-container">
-          {Object.entries(issues).map(([id, issue]) => (
-            <Card
-              key={issue.id}
-              title={issue.title}
-              body={issue.body}
-              labels={issue.labels}
-              issueUrl={this.issueUrl}
-              owner={owner}
-              repo={repo}
-              number={issue.number}
+          {Object.entries(issues).map(([id, issue]) =>
+          <Card
+            key={issue.id}
+            title={issue.title}
+            body={issue.body}
+            labels={issue.labels}
+            issueUrl={this.issueUrl}
+            owner={owner}
+            repo={repo}
+            number={issue.number}
+            closed={issue.closed_at ? true : false}
             />
           ))}
         </div>

src/features/Issues/Issues.scss

@@ -104,6 +104,23 @@ $breakpoint-tablet: 768px;
     color: white;
     padding: 20px;
     font-size: 18px;
+    position: relative;
+  }
+  .card-status-icon {
+    background: white;
+    padding: 3px 5px;
+    border-radius: 8px;
+    display: inline-flex;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    &.open svg {
+      fill: green !important;
+    }
+    &.closed svg {
+      fill: red !important;
+    }
   }
   .card-body {
     padding: 20px;