add the artist details component

client/src/app/app-routing.module.ts

@@ -14,6 +14,7 @@ const routes: Routes = [
     path: 'artists',
     loadChildren: () => import('./pages/artists/artists.module').then(m => m.ArtistsModule)
   },
+
   {
     path: 'tracks',
     loadChildren: () => import('./pages/tracks/tracks.module').then(m => m.TracksModule)

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

@@ -1,10 +1,13 @@
 export class Artist {
+  id: string;
   name: string;
   image: string;
   url: string;
-  constructor(name: string, image: string, url: string) {
+  constructor(id: string, name: string, image: string, url: string) {
+    this.id = id;
     this.name = name;
     this.image = image;
     this.url = url;
   }
+
 }

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

@@ -0,0 +1,20 @@
+.overlay {
+  display: flex;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  color: rgb(255, 255, 255);
+  opacity: 0;
+  transition: all 0.25s cubic-bezier(0.3, 0, 0.4, 1) 0s;
+}
+
+.img-container:hover .overlay {
+  opacity: 1;
+}

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

@@ -0,0 +1,17 @@
+<div class="h-full grid place-items-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">
+        <img class="object-cover" [ngSrc]="artist.image" alt="artist" fill priority>
+      </div>
+      <div class="overlay">
+        <img ngSrc="/assets/icons/info.svg" class="w-5" alt="info" height="46" width="46">
+      </div>
+    </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">
+        {{ artist.name }}</p>
+    </a>
+  </a>
+</div>

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

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from "@angular/router";
+import { Observable } from "rxjs";
+import { Artist } from "../../../models/artist.model";
+import { NgxUiLoaderService } from "ngx-ui-loader";
+import { ArtistService } from "../../../services/artist.service";
+
+@Component({
+  selector: 'app-artist-details',
+  templateUrl: './artist-details.component.html',
+  styleUrls: ['./artist-details.component.css']
+})
+export class ArtistDetailsComponent implements OnInit {
+  id = '';
+  isLoading: boolean = true;
+  artist$!: Observable<Artist | undefined>;
+
+  constructor(private route: ActivatedRoute, private artistService: ArtistService, private ngxService: NgxUiLoaderService) {
+    this.route.params.subscribe(params => {
+      this.id = params['id'];
+    });
+  }
+
+  ngOnInit(): void {
+    this.ngxService.startLoader("in-app-loader");
+    this.artist$ = this.getArtist();
+    this.isLoading = false;
+    this.ngxService.stopLoader("in-app-loader");
+  }
+
+  getArtist(): Observable<Artist | undefined> {
+    return this.artistService.getArtist(this.id);
+  }
+
+}

client/src/app/pages/artists/artists-routing.module.ts

@@ -2,13 +2,18 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { ArtistsComponent } from "./artists.component";
 import { authGuard } from "../../guards/auth.guard";
+import { ArtistDetailsComponent } from "./artist-details/artist-details.component";
 
 
 const routes: Routes = [
   {
     path: '', component: ArtistsComponent,
     canActivate: [authGuard]
   },
+  {
+    path: ':id', component: ArtistDetailsComponent,
+    canActivate: [authGuard]
+  }
 ];
 
 @NgModule({

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

@@ -20,8 +20,7 @@ <h1 class="capitalize text-white text-2xl lg:text-3xl font-bold">Top Artists</h1
     </div>
   </div>
   <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(200px,auto))] gap-x-5 gap-y-10">
-    <a *ngFor="let artist of topArtists$ | async" [href]="artist.url" target="_blank"
-       class="flex flex-col items-center gap-y-4">
+    <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">
           <img class="object-cover" [ngSrc]="artist.image" alt="artist" fill priority>

client/src/app/pages/artists/artists.module.ts

@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { ArtistsComponent } from './artists.component';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { ArtistsRoutingModule } from "./artists-routing.module";
+import { ArtistDetailsComponent } from './artist-details/artist-details.component';
 
 @NgModule({
-  declarations: [ArtistsComponent],
+  declarations: [ArtistsComponent, ArtistDetailsComponent],
   imports: [SharedModule, ArtistsRoutingModule],
   exports: [ArtistsComponent]
 })

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

@@ -21,6 +21,7 @@ export class ArtistService {
       map((response: any) => {
         return response.items.map((item: any) => {
           return {
+            id: item.id,
             name: item.name,
             image: item.images[2].url,
             url: item.external_urls.spotify
@@ -39,6 +40,7 @@ export class ArtistService {
       map((response: any) => {
         return response.items.map((item: any) => {
           return {
+            id: item.id,
             name: item.name,
             image: item.images[0].url,
             url: item.external_urls.spotify
@@ -52,4 +54,21 @@ export class ArtistService {
     )
   }
 
+  getArtist(id: string): Observable<Artist | undefined> {
+    return this.http.get<Artist>(`/artists/${id}`).pipe(
+      map((response: any) => {
+        return {
+          id: response.id,
+          name: response.name,
+          image: response.images[0].url,
+          url: response.external_urls.spotify
+        };
+      }),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      })
+    )
+  }
+
 }