Creacion de entitylist generica

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%;
+      }
+    }
+  }
+}