Add favorite icon

HugoCapocci · HugoCapocci · commit 16e58b6c2486 · 2019-03-05T14:18:20.000+01:00
diff --git a/src/app/timeline/timeline.component.html b/src/app/timeline/timeline.component.html
@@ -6,6 +6,10 @@
   <div class="tweet-content">
     {{ tweet.text }}
   </div>
+  <div class="favorite">
+    <i class="far fa-heart"></i>
+    <span *ngIf="tweet.favoriteCount">{{ tweet.favoriteCount }}</span>
+  </div>
 </div>
 
 <div class="create-tweet-container">
diff --git a/src/app/timeline/timeline.component.less b/src/app/timeline/timeline.component.less
@@ -27,6 +27,17 @@
   }
 }
 
+.favorite {
+  margin-top: 5px;
+  color: #e0245e;
+  .button {
+    cursor: pointer;
+  }
+  span {
+    margin-left: 4px;
+  }
+}
+
 .create-tweet-container {
   margin-top: 20px;
   margin-left: 10px;
diff --git a/src/app/timeline/timeline.component.ts b/src/app/timeline/timeline.component.ts
@@ -18,7 +18,8 @@ export class TimelineComponent implements OnInit {
       created_at: 'Thu Apr 06 15:24:15 +0000 2017',
       id: 2,
       text: 'Qui a deux pouces et qui s\'en fout ? Bob Kelso !',
-      user: 'Bob kelso'
+      user: 'Bob kelso',
+      favoriteCount: 2
     },
   ];
 
diff --git a/src/index.html b/src/index.html
@@ -4,9 +4,14 @@
   <meta charset="utf-8">
   <title>AngularShopTutorial</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link
+    rel="stylesheet"
+    href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
+    crossorigin="anonymous"
+  >
 </head>
 <body>
   <app-root></app-root>
