Tag view page

app/components/Dashboard/BestNewMusicTab/index.js

@@ -23,9 +23,7 @@ class BestNewMusicTab extends React.Component {
 	  <div className={styles.best_new_music_section_container}>
 	    <BestNewList
 	       data={this.props.dashboardData.bestNewAlbums}
-	       />
-
-
+	       />	    
 	  </div>
          <h2>
 	    Best new tracks
@@ -36,7 +34,6 @@ class BestNewMusicTab extends React.Component {
 	       />
 	  </div>
 	</div>
-
       </Tab.Pane>
     );
   }

app/components/Dashboard/GenresTab/index.js

@@ -33,7 +33,7 @@ class GenresTab extends React.Component {
                     <div className={styles.genre_overlay}>
 		      <div className={styles.genre_bg}
 			   style={{
-			     backgroundImage: 'url(' + 'https://picsum.photos/500/500/?random&blur&seed=' + i  + ')'
+			     backgroundImage: 'url(' + 'https://picsum.photos/256x256/?random&seed=' + i  + ')'
 			   }}
 			   >
 		      </div>

app/components/Dashboard/GenresTab/styles.scss

@@ -40,10 +40,9 @@
     position: relative;
     width: 100%;
     height: 100%;
-    background-image: url(https://source.unsplash.com/random/512x512);
     background-size: contain;
     background-position: center;
-    opacity: 0.65;
+    opacity: 0.60;
   }
 
   .genre_name {

app/components/TagView/TagHeader/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import _ from 'lodash';
+
+import styles from './styles.scss';
+
+class TagHeader extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      tag,
+      tagInfo,
+      topArtists
+    } = this.props;
+
+    return (
+      <div className={styles.tag_header_container}>
+        <div
+	   style={{backgroundImage: `url(${_.last(topArtists[0].image)['#text']})`}}
+	   className={styles.tag_header_background}
+	   />
+        <div className={styles.tag_header_name}>
+	  {tag}
+	</div>
+      </div>
+    );
+  }
+}
+
+export default TagHeader;

app/components/TagView/TagHeader/styles.scss

@@ -0,0 +1,29 @@
+.tag_header_container {
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  height: 25rem;
+  width: 100%;
+
+  .tag_header_background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-size: cover;
+    filter: brightness(40%);
+  }
+
+  .tag_header_name {
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-start;
+    align-items: flex-end;
+    height: 100%;
+    font-size: 48px;
+    font-weight: normal;
+    z-index: 10;
+    padding: 2rem;
+  }
+}

app/components/TagView/TagTopArtists/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import styles from './styles.scss';
+
+class TagTopArtists extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+
+    } = this.props;
+    return (
+      <div className={styles.tag_top_artists}>
+      </div>
+    );
+  }
+}
+
+export default TagTopArtists;

app/components/TagView/TagTopArtists/styles.scss

@@ -0,0 +1,3 @@
+.tag_top_artists {
+
+}

app/components/TagView/index.js

@@ -1,5 +1,8 @@
 import React from 'react';
+import {Dimmer, Loader} from 'semantic-ui-react';
 
+import TagHeader from './TagHeader';
+import TagTopArtists from './TagTopArtists';
 import styles from './styles.scss';
 
 class TagView extends React.Component {
@@ -17,10 +20,39 @@ class TagView extends React.Component {
       tag,
       tags
     } = this.props;
+
+    let tagInfo, topTracks, topAlbums, topArtists;
+    if (tags[tag] && tags[tag].loading !== true) {
+      tagInfo = tags[tag][0].tag;
+      topTracks = tags[tag][1].tracks.track;
+      topAlbums = tags[tag][2].albums.album;
+      topArtists = tags[tag][3].topartists.artist;
+    }
 
     return (
-      <div>
-	{tag}
+      <div className={styles.tag_view_container}>
+	<Dimmer.Dimmable>
+	  <Dimmer active={tags[tag] === undefined || tags[tag].loading}>
+	    <Loader/>
+          </Dimmer>
+
+	  {
+	    tags[tag] === undefined || tags[tag].loading
+	      ? null
+	      : (
+		<div className={styles.tag_view}>
+                  <TagHeader
+		     tag={tag}
+		     tagInfo={tagInfo}
+		     topArtists={topArtists}
+		     />
+		  <TagTopArtists
+		     topArtists={topArtists}
+		     />
+		</div>
+	      )
+	  }
+	</Dimmer.Dimmable>
       </div>
     );
   }

app/components/TagView/styles.scss

@@ -0,0 +1,14 @@
+.tag_view_container {
+  width: 100%;
+  height: 100%;
+
+  .dimmable {
+    width: 100%;
+    height: 100%;
+  }
+
+  .tag-view {
+    width: 100%;
+    height: 100%;
+  }
+}