Pagina nueva

src/app/homepage/searchBar/searchBar.component.html

@@ -0,0 +1,43 @@
+<div class="field has-addons">
+  <div class="control is-expanded">
+    <input #input class="input" type="search" (focus)="showList = true" [value]="query$.getValue()" (input)="query$.next(input.value)" (keyup.enter)="search()">
+  </div>
+  <div class="control">
+    <a class="button" [class]="button_color"><span class="icon"><i class="fas fa-search"></i></span></a>
+  </div>
+</div>
+
+<div *ngIf="showList && areResults()" (mouseleave)="show()" class="autocomplete">
+  <div *ngIf="artists.length > 0">
+    <div class="header">
+      <p>Artistas</p>
+    </div>
+    <div *ngFor="let result of artists" class="artist">
+      {{ result.name }}
+    </div>
+  </div>
+  <div *ngIf="discs.length > 0">
+    <div class="header">
+      <p>Discos</p>
+    </div>
+    <div *ngFor="let result of discs" class="media disc">
+      <figure class="media-left">
+        <img *ngIf="result.cover_art" class="image is-64x64 cropped" src="{{result.cover_art.small}}"
+             alt="{{result.title}} cover art">
+        <img *ngIf="!result.cover_art" class="image is-64x64 cropped" src="../../../assets/svg/placeholder.svg"
+             alt="{{result.title}} missing cover art">
+      </figure>
+      <div class="media-content">
+        <p>{{result.title}}</p>
+      </div>
+    </div>
+  </div>
+  <div *ngIf="recordings.length > 0">
+    <div class="header">
+      <p>Canciones</p>
+    </div>
+    <div *ngFor="let result of recordings" class="recording">
+      {{ result.title }}
+    </div>
+  </div>
+</div>