Agregados headers a las entitylist

src/components/EntityList.jsx

@@ -2,6 +2,14 @@ import React from "react";
 import {Link} from "react-router-dom";
 import "./EntityList.scss"
 
+const EntityHeader = (props) => {
+  return (
+    <div class='entity-header'>
+      {props.title}
+    </div>
+  )
+}
+
 const EntityPlaceholder = (props) => {
   return (
     <li className={'entity-item ' + (props.cover ? '' : 'pulsating')}>
@@ -50,10 +58,16 @@ export const EntityList = (props) => {
   if(props.placeholder){
     entities = [];
     for(const i of Array(props.size).keys()){
-      entities.push(<EntityPlaceholder key={i} cover={props.cover}/>)
+      entities.push(<EntityPlaceholder key={i} cover={props.cover}/>);
     }
   }else{
-    entities = props.list.items.map(item => <EntityItem item={item}/>);
+    let mapped = props.list.map(group => {
+      let header = group.header ? <EntityHeader title={group.header}/> : null;
+      let items = group.items.map(item => <EntityItem item={item}/>);
+      items.unshift(header);
+      return items;
+    });
+    entities = [].concat.apply([], mapped);
   }
 
   const className = props.grid ? "grid" : "column";

src/components/EntityList.scss

@@ -1,5 +1,11 @@
 // Base
 .entity-list {
+  .entity-header{
+    font-size: 1.2em;
+    font-weight: 500;
+    border-bottom: solid var(--line-width) var(--accent);
+  }
+
   .entity-item {
     a {
       text-decoration: none;
@@ -29,29 +35,31 @@
 
 // Column mode
 .entity-list.column {
-
-  .entity-item .entity-container {
-    display: flex;
-    justify-content: space-between;
-
-    a {
+  .entity-item{
+    margin-bottom: 1em;
+    .entity-container {
       display: flex;
-      flex-direction: row;
-      align-items: center;
+      justify-content: space-between;
 
-      padding: 1em 1em;
-
-      flex-grow: 2;
-      .body {
+      a {
         display: flex;
-        flex-direction: column;
-      }
-    }
+        flex-direction: row;
+        align-items: center;
 
-    .widget {
-      display: flex;
-      align-items: center;
-      padding-right: 1em;
+        padding: 1em 1em;
+
+        flex-grow: 2;
+        .body {
+          display: flex;
+          flex-direction: column;
+        }
+      }
+
+      .widget {
+        display: flex;
+        align-items: center;
+        padding-right: 1em;
+      }
     }
   }
 }