Cuandos usuarios viendo "FAKE"

src/components/EntityList.jsx

@@ -44,7 +44,7 @@ const EntityItem = (props) => {
         </Link>
         { item.widget &&
           <div class="widget">
-            <button class='button'>Agregar a mi lista</button>
+            {item.widget}
           </div>
         }
       </div>

src/styles/main.scss

@@ -127,6 +127,11 @@ svg {
   margin: auto;
 }
 
+svg.icon {
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+
 .container {
   margin-bottom: 1em;
 }

src/views/Recomended.jsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {FaEye} from 'react-icons/fa'
 
 import {getArtist, getDisc, getSong} from '../services/entity_service';
 
@@ -22,7 +23,8 @@ const PopularArtists = () => {
       'cover': null,
       'link': `/artist/${artist.id}`,
       'title': artist.name,
-      'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
+      'subtitle': [artist.type, artist.country].filter(Boolean).join(' - '),
+      'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
     }));
     const list = [{
       'items': items
@@ -48,7 +50,8 @@ const PopularDiscs = () => {
       'cover': <CoverArt disc={disc}/>,
       'link': `/disc/${disc.id}`,
       'title': disc.title,
-      'subtitle': disc.artist.name
+      'subtitle': disc.artist.name,
+      'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
     }));
     const list = [{
       'items': items
@@ -74,7 +77,8 @@ const PopularSongs = () => {
       'cover': null,
       'link': `/song/${song.id}`,
       'title': song.title,
-      'subtitle': song.artist.name
+      'subtitle': song.artist.name,
+      'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
     }));
     const list = [{
       'items': items