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>

src/index.jsx

@@ -2,6 +2,7 @@ import React, {Fragment} from 'react';
 import ReactDOM from 'react-dom';
 import {Search} from './components/Search';
 import {SearchBar} from "./components/SearchBar";
+import {EntityList} from "./components/EntityList";
 
 import './styles/reset.css';
 import './styles/main.scss';
@@ -40,6 +41,7 @@ const App = () => (
                 <Route path='/search/:who?' component={Search}/>
                 <Route path='/artist/:mbid?' component={ArtistView}/>
                 <Route path='/disc/:mbid?' component={DiscView}/>
+                <Route path='/test' component={EntityList}/>
                 <Route exact path='/' component={Main}/>
                 <Route path='*' component={NoRoute}/>
             </Switch>

src/styles/main.scss

@@ -214,76 +214,76 @@ ul.pagination {
 }
 
 /* Lista de entidades */
-ul.entity_list {
+// ul.entity_list {
-  display: flex;
+//   display: flex;
-  flex-direction: column;
+//   flex-direction: column;
-
+//
-  li.artist, li.disc, li.song {
+//   li.artist, li.disc, li.song {
-    border-bottom: var(--line-width) var(--gray-1) solid;
+//     border-bottom: var(--line-width) var(--gray-1) solid;
-    margin-bottom: 1em;
+//     margin-bottom: 1em;
-
+//
-    .cover-container {
+//     .cover-container {
-      width: 200px;
+//       width: 200px;
-      height: 200px;
+//       height: 200px;
-      margin: 1em;
+//       margin: 1em;
-    }
+//     }
-
+//
-    &:last-child {
+//     &:last-child {
-      margin-bottom: auto;
+//       margin-bottom: auto;
-    }
+//     }
-
+//
-    &:hover {
+//     &:hover {
-      background-color: var(--gray-1);
+//       background-color: var(--gray-1);
-      border-bottom: var(--line-width) var(--accent) solid;
+//       border-bottom: var(--line-width) var(--accent) solid;
-    }
+//     }
-
+//
-    a {
+//     a {
-      display: flex;
+//       display: flex;
-      text-decoration: none;
+//       text-decoration: none;
-      color: var(--black);
+//       color: var(--black);
-      align-items: center;
+//       align-items: center;
-      height: 100%;
+//       height: 100%;
-
+//
-      .description {
+//       .description {
-        display: flex;
+//         display: flex;
-        flex-direction: column;
+//         flex-direction: column;
-        justify-content: center;
+//         justify-content: center;
-        padding-left: 1em;
+//         padding-left: 1em;
-
+//
-        .small {
+//         .small {
-          color: var(--gray-4);
+//           color: var(--gray-4);
-          font-size: .8em;
+//           font-size: .8em;
-        }
+//         }
-      }
+//       }
-
+//
-    }
+//     }
-  }
+//   }
-
+//
-  li.artist {
+//   li.artist {
-    height: 4em;
+//     height: 4em;
-  }
+//   }
-
+//
-  li.disc {
+//   li.disc {
-    height: 14em;
+//     height: 14em;
-
+//
-    a {
+//     a {
-      .release-date {
+//       .release-date {
-        display: inline-block;
+//         display: inline-block;
-        font-size: .7em;
+//         font-size: .7em;
-        background-color: var(--gray-4);;
+//         background-color: var(--gray-4);;
-        color: var(--white);
+//         color: var(--white);
-        padding: .1rem .5em;
+//         padding: .1rem .5em;
-        border-radius: .25em;
+//         border-radius: .25em;
-        text-align: center;
+//         text-align: center;
-        line-height: 1;
+//         line-height: 1;
-      }
+//       }
-    }
+//     }
-  }
+//   }
-
+//
-  li.song {
+//   li.song {
-    height: 4em;
+//     height: 4em;
-  }
+//   }
-}
+// }
 
 .cover-caption {
   figcaption {