build the artist-details component

client/src/app/components/navigation/navbar/navbar.component.html

@@ -1,40 +1,40 @@
 <nav
   class="bg-dark w-full h-full overflow-hidden md:h-full md:w-[100px] md:order-1 md:flex md:flex-col md:justify-between md:items-center md:py-8">
-  <a routerLink="/"><img src="/assets/icons/spotify.svg" class="hidden md:block w-12" alt="spotify"></a>
+  <a routerLink="/"><img ngSrc="/assets/icons/spotify.svg" class="hidden md:block" width="48" height="48" alt="spotify"></a>
   <div
     class="flex items-center text-white w-full h-full text-xs md:flex-col md:h-[60%] transition-all ease-linear duration-300">
     <a
       class="opacity-50 w-full h-full flex flex-col items-center justify-center gap-y-1 hover:opacity-100 hover:bg-lightDark border-t-[3px] md:border-t-0 md:border-l-[4px] border-transparent hover:border-primary transition-colors ease-in-out duration-300"
       routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
-      <img src="/assets/icons/profile.svg" class="w-5"/>
+      <img ngSrc="/assets/icons/profile.svg" width="20" height="20" alt="profile icon" />
       <span class="inline-block">Profile</span>
     </a>
     <a
       class="opacity-50 w-full h-full flex flex-col items-center justify-center gap-y-1 hover:opacity-100 hover:bg-lightDark border-t-[3px] md:border-t-0 md:border-l-[4px] border-transparent hover:border-primary transition-colors ease-in-out duration-300"
       routerLink="artists" routerLinkActive="active">
-      <img src="/assets/icons/microphone.svg" class="w-5"/>
+      <img ngSrc="/assets/icons/microphone.svg" class="w-5" alt="mic icon" height="16" width="16"/>
       <span class="inline-block">Top Artists</span>
     </a>
     <a
       class="opacity-50 w-full h-full flex flex-col items-center justify-center gap-y-1 hover:opacity-100 hover:bg-lightDark border-t-[3px] md:border-t-0 md:border-l-[4px] border-transparent hover:border-primary transition-colors ease-in-out duration-300"
       routerLink="tracks" routerLinkActive="active">
-      <img src="/assets/icons/music.svg" class="w-5"/>
+      <img ngSrc="/assets/icons/music.svg" width="20" height="20" alt="track icon" />
       <span class="inline-block">Top Tracks</span>
     </a>
     <a
       class="opacity-50 w-full h-full flex flex-col items-center justify-center gap-y-1 hover:opacity-100 hover:bg-lightDark border-t-[3px] md:border-t-0 md:border-l-[4px] border-transparent hover:border-primary transition-colors ease-in-out duration-300"
       routerLink="recent" routerLinkActive="active">
-      <img src="/assets/icons/time.svg" class="w-5"/>
+      <img ngSrc="/assets/icons/time.svg" width="20" height="20" alt="recent icon" />
       <span class="inline-block">Recent</span>
     </a>
     <a
       class="opacity-50 w-full h-full flex flex-col items-center justify-center gap-y-1 hover:opacity-100 hover:bg-lightDark border-t-[3px] md:border-t-0 md:border-l-[4px] border-transparent hover:border-primary transition-colors ease-in-out duration-300"
       routerLink="playlists" routerLinkActive="active">
-      <img src="/assets/icons/playlist.svg" class="w-5"/>
+      <img ngSrc="/assets/icons/playlist.svg" class="w-5" alt="playlist icon" width="20" height="20"/>
       <span class="inline-block">Playlists</span>
     </a>
   </div>
   <a href="https://github.com/wissemgrari/spotify-profile" target="_blank">
-    <img src="/assets/icons/github.svg" class="hidden md:block w-8" alt="github">
+    <img ngSrc="/assets/icons/github.svg" class="hidden md:block" width="32" height="32" alt="github">
   </a>
 </nav>

client/src/app/models/artist.model.ts

@@ -3,11 +3,17 @@ export class Artist {
   name: string;
   image: string;
   url: string;
-  constructor(id: string, name: string, image: string, url: string) {
+  followers?: number;
+  popularity?: number;
+  genres?: string[];
+  constructor(id: string, name: string, image: string, url: string, followers?: number, popularity?: number, genres?: string[]) {
     this.id = id;
     this.name = name;
     this.image = image;
     this.url = url;
+    this.followers = followers;
+    this.popularity = popularity;
+    this.genres = genres;
   }
-  
+
 }

client/src/app/pages/artists/artist-details/artist-details.component.html

@@ -1,7 +1,8 @@
-<div class="h-full grid place-items-center" *ngIf="artist$ | async as artist">
+<div class="h-full flex flex-col justify-center" *ngIf="artist$ | async as artist">
   <a class="flex flex-col items-center">
     <div class="relative img-container cursor-pointer">
-      <div class="relative w-[200px] h-[200px] md:w-[280px] md:h-[280px] xl:w-[320px] xl:h-[320px] rounded-full overflow-hidden">
+      <div
+        class="relative w-[200px] h-[200px] md:w-[280px] md:h-[280px] xl:w-[320px] xl:h-[320px] rounded-full overflow-hidden">
         <img class="object-cover" [ngSrc]="artist.image" alt="artist" fill priority>
       </div>
       <div class="overlay">
@@ -10,8 +11,23 @@
     </div>
     <a class="mt-5" [href]="artist.url" target="_blank">
       <p
-        class="text-white text-2xl md:text-5xl xl:text-6xl font-bold cursor-pointer border-b border-transparent hover:border-white transition duration-300">
+        class="text-white text-3xl md:text-5xl xl:text-6xl font-bold cursor-pointer border-b border-transparent hover:border-white transition duration-300">
         {{ artist.name }}</p>
     </a>
   </a>
+  <div class="mt-5 max-w-sm w-full mx-auto flex justify-between">
+    <div class="flex flex-col items-center">
+      <span class="font-bold text-lg text-blue tracking-[.1em]">{{ artist.followers }}</span>
+      <p class="text-white/50 uppercase text-xs font-normal tracking-[.2em]">followers</p>
+    </div>
+    <div class="flex flex-col items-center">
+      <span *ngIf="artist.genres?.length === 0" class="font-bold text-lg text-blue">-</span>
+      <span class="font-bold text-lg text-blue" *ngFor="let genre of artist.genres">{{ genre }}</span>
+      <p class="text-white/50 uppercase text-xs font-normal tracking-[.2em]">genres</p>
+    </div>
+    <div class="flex flex-col items-center">
+      <span class="font-bold text-lg text-blue tracking-[.1em]">{{ artist.popularity }}</span>
+      <p class="text-white/50 uppercase text-xs font-normal tracking-[.2em]">popularity</p>
+    </div>
+  </div>
 </div>

client/src/app/pages/artists/artists.component.html

@@ -19,10 +19,10 @@ <h1 class="capitalize text-white text-2xl lg:text-3xl font-bold">Top Artists</h1
   4 Weeks</span>
     </div>
   </div>
-  <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(200px,auto))] gap-x-5 gap-y-10">
+  <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(160px,auto))] gap-x-10 gap-y-10">
     <a *ngFor="let artist of topArtists$ | async" [routerLink]="artist.id" class="flex flex-col items-center gap-y-4">
       <div class="relative img-container cursor-pointer">
-        <div class="relative w-36 h-36 xl:w-44 xl:h-44 rounded-full overflow-hidden">
+        <div class="relative w-40 h-40 md:w-32 md:h-32 lg:w-44 lg:h-44 xl:w-48 xl:h-48 rounded-full overflow-hidden">
           <img class="object-cover" [ngSrc]="artist.image" alt="artist" fill priority>
         </div>
         <div class="overlay">

client/src/app/services/artist.service.ts

@@ -61,7 +61,10 @@ export class ArtistService {
           id: response.id,
           name: response.name,
           image: response.images[0].url,
-          url: response.external_urls.spotify
+          url: response.external_urls.spotify,
+          followers: response.followers.total,
+          popularity: response.popularity,
+          genres: response.genres,
         };
       }),
       catchError((error) => {

client/tailwind.config.js

@@ -7,10 +7,11 @@ module.exports = {
     extend: {
       colors: {
         primary: '#1db954',
+        blue: '#509bf5',
         dark: '#040306',
         lightDark: '#181818',
       }
     },
   },
   plugins: [],
-}
+}