Vista de discos con Entity

src/components/Disc.jsx

@@ -1,28 +1,18 @@
-import React, {useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 // import queryString from "query-string";
 import {getDisc} from "../services/entity_service";
 import {CoverArt} from "./CoverArt";
-import './Disc.scss';
+import {Entity} from "./Entity";
 
 const Disc = (props) => {
   const disc = props.disc;
   if (disc){
-        return (
-            <div className='disc'>
-                <div className='space-between'>
-                    <div className='title'>
-                        <h1>{disc.title}</h1>
-                        {/*<h4>{disc.artist[0].name}</h4>*/}
-                        <button className='button'>Agregar a mi Lista</button>
-                    </div>
-                    <div className='cover-container'>
-                        <CoverArt disc={disc}/>
-                    </div>
-                </div>
-            </div>
-        )
+    return <Entity title={disc.title}
+      subtitle={disc.artist.name}
+      buttonText='Agregar a mi lista'
+      cover={<CoverArt disc={disc}/>}/>
   }else {
-        return <></>
+    return <Fragment></Fragment>
   }
 }
 
@@ -38,8 +28,6 @@ export const DiscView = (props) => {
     }
   }, [mbid])
 
-
-
   return (
     <Disc disc={disc}/>
   )

src/components/Disc.scss

@@ -1,18 +0,0 @@
-.disc {
-  .title {
-    h1 {
-      margin-bottom: 0
-    }
-    h4 {
-      margin-top: 0;
-      margin-bottom: .5em
-    }
-  }
-
-  .cover-container {
-    width: 250px;
-    height: 250px;
-    min-width: 250px;
-    margin-top: 1em;
-  }
-}