entity -> entity-item

src/components/EntityList.jsx

@@ -4,7 +4,7 @@ import "./EntityList.scss"
 
 const EntityItem = (props) => {
   return (
-      <li className='entity'>
+      <li className='entity-item'>
           <Link to={props.link}>
             {props.cover &&
               <div className='cover'>
@@ -26,7 +26,7 @@ export const EntityList = (props) => {
 
   const className = props.grid ? "grid" : "column";
   return (
-    <ul className={'entity_list ' + className}>
+    <ul className={'entity-list ' + className}>
       {entities}
     </ul>
   )

src/components/EntityList.scss

@@ -1,6 +1,6 @@
 // Base
-.entity_list {
+.entity-list {
-  .entity {
+  .entity-item {
     a {
       text-decoration: none;
       color: var(--black);
@@ -28,11 +28,11 @@
 }
 
 // Column mode
-.entity_list.column {
+.entity-list.column {
   display: flex;
   flex-direction: column;
 
-  .entity a {
+  .entity-item a {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -45,7 +45,7 @@
 }
 
 // Grid mode
-.entity_list.grid {
+.entity-list.grid {
   $grid-width: 250px;
   $grid-height: 275px;
   $grid-gap: 20px;
@@ -67,7 +67,7 @@
     justify-content: space-between;
   }
 
-  .entity {
+  .entity-item {
     a {
       .cover {
         width: 250px;
@@ -92,8 +92,8 @@
 }
 
 // Highligth Column
-.entity_list.column{
+.entity-list.column{
- .entity {
+ .entity-item {
     border-bottom: solid var(--line-width) var(--gray-1);
     transition: background-color 300ms ease-in;
 
@@ -115,8 +115,8 @@
 }
 
 // Highligth Grid
-.entity_list.grid{
+.entity-list.grid{
-  .entity {
+  .entity-item {
     .body .title:after {
       display: block;
       content: '';