Artist and Artist Search

src/components/Artist.jsx

@@ -1,15 +1,48 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+// import Star from './Star.jsx'
+import './Artist.scss'
+
+const star = (
+  <svg width="497" height="473" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <title>Layer 1</title>
+      <polygon stroke="#b6b6b6" points="248.63946533203125,2.5 309.48846435546875,177.55484008789062 494.77880859375,181.33078002929688 347.09527587890625,293.2965545654297 400.761962890625,470.68504333496094 248.63946533203125,364.82884216308594 96.51692199707031,470.68504333496094 150.18370056152344,293.2965545654297 2.5,181.33078002929688 187.7904052734375,177.55484008789062 248.63946533203125,2.5 309.48846435546875,177.55484008789062 " strokeWidth="20" strokecolor="#000000" fill="#d7d7d7" orient="point" r2="47.37444" r="118.43611" point="5" shape="star" id="svg_1" cy="137.5" cx="221"/>
+    </g>
+  </svg>
+)
 
 function Artist({ props }) {
+  let [rate, setRate] = useState([])
+
+  useEffect(() => {
+    let stars = []
+    for (let i=0; i<Math.floor(props.popularity/20); i++) {
+      stars.push(star)
+    }
+
+    setRate(stars)
+  }, [props])
+
   return (
     <div className='artist'>
+      <div className='picture'>
         {props.images.length > 0 && (
-        <img src={props.images[0].url} style={{height:150}} />
+          <img src={props.images[0].url} />
         )}
-      <p>{props.name}</p>
+      </div>
-      <p>Popularity: {Math.floor(props.popularity/20)}</p>
+
-      <p>Followers: {props.followers.total}</p>
+      <div className='details'>
-      <p>Id: {props.id}</p>
+        <div className='text'>
+          <h2>{props.name}</h2>
+          <p>{props.followers.total.toLocaleString()} followers</p>
+        </div>
+
+        <div className='rate'>
+          {rate}
+        </div>
+
+      </div>
+
     </div>
   )
 }

src/components/Artist.scss

@@ -0,0 +1,56 @@
+.artist {
+  border: solid thin #b6b6b6;
+  width: 12em;
+  height: 16em;
+
+  .picture {
+    border-bottom: solid thin #b6b6b6;
+    background: #d7d7d7;
+    height: 9em;
+    overflow: hidden;
+
+    img {
+      min-height: 9em;
+      max-width: 12em;
+    }
+  }
+
+  .details {
+    display: inline-table;
+    position: relative;
+    height: 7em;
+    width: 100%;
+    text-align: left;
+
+    h2 {
+      font-size: 1rem;
+      margin-bottom: 5px;
+      font-weight: 500;
+      color: #444;
+    }
+
+    p {
+      font-size: 0.7rem;
+      color: #787878;
+      margin-top: 0;
+    }
+
+    .text {
+      padding: 0 1em;
+    }
+
+    .rate {
+      position: absolute;
+      bottom: 0;
+      padding-left: 1em;
+      padding-bottom: 10px;
+
+      svg {
+        height: 20px;
+        width: 20px;
+        margin: auto;
+      }
+    }
+  }
+
+}

src/components/Star.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function Star() {
+  return (
+    <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <title>Layer 1</title>
+        <polygon stroke="#b6b6b6" points="320.0000457763672,5.9074859619140625 380.8490447998047,180.9623260498047 566.1394195556641,184.73826599121094 418.4558563232422,296.70404052734375 472.12254333496094,474.092529296875 320.0000457763672,368.236328125 167.8775177001953,474.092529296875 221.54429626464844,296.70404052734375 73.860595703125,184.73826599121094 259.15098571777344,180.9623260498047 320.0000457763672,5.9074859619140625 380.8490447998047,180.9623260498047 " strokeWidth="5" strokecolor="#000000" fill="#d7d7d7" orient="point" r2="47.37444" r="118.43611" point="5" shape="star" id="svg_1" cy="137.5" cx="221"/>
+      </g>
+    </svg>
+  )
+}
+
+export default Star

src/views/ArtistSearch.scss

@@ -1,7 +1,5 @@
 .artist-search {
-  h1 {
   text-align: center;
-  }
 
   ul {
 		list-style-type: none;
@@ -11,6 +9,7 @@
 
 		li {
 			display: inline-block;
+      margin: 10pt 14pt;
 		}
 	}
 }