Album CSS and link to Spotify

src/components/Album.jsx

@@ -1,25 +1,28 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import './Album.scss'
 
-function Album({ props, callback }) {
+function Album({ props }) {
-  let [rate, setRate] = useState([])
-
-  const openAlbums = () => {
-    callback(props.id)
-  }
-
   return (
-    <div className='album' onClick={openAlbums}>
+    <div className='album'>
       <div className='picture'>
         {props.images.length > 0 && (
-          <img src={props.images[0].url} />
+          <img src={props.images[0].url} alt={props.name}/>
         )}
       </div>
 
       <div className='details'>
         <div className='top'>
-          <div className='title'><h2>{props.name}</h2></div>
+          <div className='title'>
-          <p>{props.artists[0].name}</p>
+            <h2>{props.name}</h2>
+          </div>
+
+          <div className='artists'>
+            <ul>
+              {props.artists.map((artist, index) => (
+                <li key={index}>{artist.name}</li>
+              ))}
+            </ul>
+          </div>
         </div>
 
         <div className='bottom'>
@@ -27,7 +30,7 @@ function Album({ props, callback }) {
           <p>{props.total_tracks} {props.total_tracks === 1 ? 'track' : 'tracks'}</p>
         </div>
 
-        <button>Preview on Spotify</button>
+        <a target='_blank' rel='noopener noreferrer' href={props.external_urls.spotify}>Preview on Spotify</a>
 
       </div>
 

src/components/Album.scss

@@ -2,7 +2,6 @@
   border: solid thin #b6b6b6;
   width: 12em;
   height: 18.5em;
-  cursor: pointer;
 
   .picture {
     border-bottom: solid thin #b6b6b6;
@@ -35,12 +34,28 @@
       }
     }
 
-    p {
+    p, li {
       font-size: 0.7rem;
       color: #787878;
       margin: 0;
     }
 
+    .artists {
+      display: grid;
+      max-height: 36px;
+
+      ul {
+        width: 100%;
+
+        li {
+          width: 100%;
+          margin: 0;
+          padding: 0;
+          display: block;
+        }
+      }
+    }
+
     .top {
       padding: 10px;
     }
@@ -51,10 +66,13 @@
       bottom: 25px;
     }
 
-    button {
+    a {
       position: absolute;
       bottom: 0;
-      height: 2.5em;
+      text-align: center;
+      padding: 7px 0;
+      text-decoration: none;
+      font-size: 9pt;
       width: 100%;
       color: #868686;
       background: #f1f1f1;

src/components/Artist.jsx

@@ -30,7 +30,7 @@ function Artist({ props, callback }) {
     <div className='artist' onClick={openAlbums}>
       <div className='picture'>
         {props.images.length > 0 && (
-          <img src={props.images[0].url} />
+          <img src={props.images[0].url} alt={props.name} />
         )}
       </div>
 

src/views/Albums.jsx

@@ -19,10 +19,6 @@ function Albums({ props }) {
       })
   }, [props])
 
-  const detailsCallback = id => {
-    console.log('Navigate to', id)
-  }
-
   return (
     <div className='spotify'>
       <h1>Albums</h1>
@@ -32,7 +28,7 @@ function Albums({ props }) {
           <ul className='list'>
             {albums.map((album, index) => (
               <li className='list-item' key={index}>
-                <Album props={album} callback={detailsCallback} />
+                <Album props={album} />
               </li>
             ))}
           </ul>