Creacion de entitylist generica

src/components/EntityList.jsx

@@ -0,0 +1,43 @@
+import React, {Fragment, useEffect, useState} from "react";
+import {Link} from "react-router-dom";
+
+import {CoverArt} from "./CoverArt";
+import "./EntityList.scss"
+
+const EntityItem = (props) => {
+  const disc = {
+    'id': '061f572e-7660-3c6b-b4cd-cf66d46da93c',
+  }
+  return (
+      <li className='entity'>
+          <Link to={props.link}>
+            {props.cover &&
+              <div className='cover'>
+                <CoverArt disc={disc} alt='Testing :3'/>
+              </div>
+            }
+            <div className='body'>
+              <span class='title'>{props.title}</span>
+              <span className='subtitle'>{props.subtitle}</span>
+            </div>
+          </Link>
+      </li>
+  )
+}
+
+export const EntityList = (props) => {
+  return (
+    <ul className="entity_list grid">
+      <EntityItem link='a' title='Freaking long title with too many words' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
+    </ul>
+  )
+}

src/components/EntityList.scss

@@ -0,0 +1,140 @@
+// Base
+.entity_list {
+  .entity {
+    a {
+      text-decoration: none;
+      color: var(--black);
+
+      .cover {
+        width: 200px;
+        height: 200px;
+        background-color: var(--gray-2);
+        margin-right: 1em;
+      }
+
+      .body {
+        .title {
+          font-weight: 500;
+        }
+        .subtitle {
+          font-size: .8em;
+        }
+      }
+    }
+  }
+}
+
+// Column mode
+.entity_list.column {
+  display: flex;
+  flex-direction: column;
+
+  .entity a {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 1em 2em;
+    .body {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+// Grid mode
+.entity_list.grid {
+  $grid-width: 250px;
+  $grid-height: 275px;
+  $grid-gap: 20px;
+
+  display: grid;
+
+  grid-auto-rows: $grid-height;
+  gap: $grid-gap;
+
+  justify-content: center;
+
+  @for $x from 1 to 5 {
+    @media (min-width: $grid-width * $x + $grid-gap * 3) {
+      grid-template-columns: repeat($x, $grid-width);
+    }
+  }
+
+  @media (min-width: $grid-width * 4 + $grid-gap * 3) {
+    justify-content: space-between;
+  }
+
+  .entity {
+    a {
+      .cover {
+        width: 250px;
+        height: 250px;
+      }
+
+      .body {
+        height: 15px;
+        .title {
+          max-width: 250px;
+          display: inline-block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .subtitle {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+// Highligth Column
+.entity_list.column{
+ .entity {
+    border-bottom: solid var(--line-width) var(--gray-1);
+    transition: background-color 300ms ease-in;
+
+    &:after{
+      display: block;
+      content: '';
+      border-bottom: solid var(--line-width) var(--accent);
+      transition: width 300ms ease-in;
+      width: 0;
+    }
+
+    &:hover {
+      &:after{
+        width: 100%;
+      }
+      background-color: var(--gray-1);
+    }
+ }
+}
+
+// Highligth Grid
+.entity_list.grid{
+  .entity {
+    .body .title:after {
+      display: block;
+      content: '';
+      border-bottom: solid var(--line-width) var(--accent);
+      transition: width 300ms ease-in;
+      width: 0;
+    }
+
+    .cover {
+      outline: none;
+      transition: all 300ms ease-in-out;
+    }
+
+    &:hover {
+      .cover {
+        outline: 6px var(--accent) solid;
+        outline-offset: -6px;
+      }
+      .body .title:after {
+        width: 100%;
+      }
+    }
+  }
+}

src/components/Search.jsx

@@ -24,7 +24,7 @@ const SearchSong = (props) => {
             <Link to={`/song/${song.id}`}>
                 <div className='description'>
                     <span>{song.title}</span>
-                    <span className='small'>{song.artist[0].name}</span>
+                    <span className='small'>{song.artist.name}</span>
                 </div>
             </Link>
         </li>