maj package

package.json

@@ -37,6 +37,7 @@
     "@angular/cli": "^21.1.0",
     "@angular/compiler-cli": "^20.1.0",
     "@types/jasmine": "~5.1.0",
+    "baseline-browser-mapping": "^2.10.16",
     "daisyui": "^5.1.22",
     "jasmine-core": "~5.8.0",
     "karma": "~6.4.0",

src/app/pages/search/searchform/searchform.ts

@@ -10,7 +10,7 @@ import { NAPOD } from '../../../services/napod';
   styleUrl: './searchform.css',
 })
 export class Searchform {
-    private readonly nasaApi = inject(NAPOD);
+  private readonly nasaApi = inject(NAPOD);
   private readonly router = inject(Router)
   searchResults = signal<NasaApi | null>(null)
   searchString=signal('');

src/app/pages/search/searchresults/searchresults.html

@@ -1 +1,32 @@
-<p>searchresults works!</p>
+@if(searchResults()!==null && searchResults()!.collection.items.length==0){
+  <div class="resultsContainer">
+    <p>No results for this search</p>
+  </div>
+}
+
+@if(searchResults()!==null && searchResults()!.collection.items.length!==0){
+  <div class="resultsContainer">
+    <ul class="list bg-base-100 rounded-box shadow-md">
+  
+      <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Results</li>          
+              @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
+                <li class="list-row">
+                  <!-- 2 for small image -->
+                  <div><a><img class="size-25 rounded-box" src="{{el.links[1].href}}"/></a></div>
+                  <div>
+                    <div>{{el.data[0].title}}</div>
+                    <div class="text-xs uppercase font-semibold opacity-60">Photographer: {{el.data[0].photographer}}</div>
+                    <p class="list-col-wrap text-xs">
+                    {{el.data[0].description}}
+                  </p>
+                  </div>                  
+                  <button class="btn btn-square btn-ghost" (click)="onClick(el.data[0].nasa_id)">
+                    <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+                  </button>
+                </li>                   
+              }                
+
+    </ul>    
+  </div>
+  }  
+</div>

src/app/shared/sidebar/sidebar.html

@@ -15,22 +15,25 @@
 <ul class="menu w-full grow">
   <li>
     <a routerLink="/" class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Homepage">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block size-4">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round"
+        stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block size-4">
         <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
-        <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+        <path
+          d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
+        </path>
       </svg>
       <span class="is-drawer-close:hidden">Homepage</span>
     </a>
   </li>
   <li>
-    <a routerLink="/settings" class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
+    <a routerLink="/potd" class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
-      <svg xmlns="http://www://w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block size-4">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round"
-        <path d="M20 7h-9"></path>
+        stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block size-4">
-        <path d="M14 17H5"></path>
+        <path stroke-linecap="round" stroke-linejoin="round"
-        <circle cx="17" cy="17" r="3"></circle>
+          d="m20.893 13.393-1.135-1.135a2.252 2.252 0 0 1-.421-.585l-1.08-2.16a.414.414 0 0 0-.663-.107.827.827 0 0 1-.812.21l-1.273-.363a.89.89 0 0 0-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 0 1-1.81 1.025 1.055 1.055 0 0 1-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 0 1-1.383-2.46l.007-.042a2.25 2.25 0 0 1 .29-.787l.09-.15a2.25 2.25 0 0 1 2.37-1.048l1.178.236a1.125 1.125 0 0 0 1.302-.795l.208-.73a1.125 1.125 0 0 0-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 0 1-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 0 1-1.458-1.137l1.411-2.353a2.25 2.25 0 0 0 .286-.76m11.928 9.869A9 9 0 0 0 8.965 3.525m11.928 9.868A9 9 0 1 1 8.965 3.525" />
-        <circle cx="7" cy="7" r="3"></circle>
       </svg>
-      <span class="is-drawer-close:hidden">Settings</span>
+
+      <span class="is-drawer-close:hidden">Picture of the day</span>
     </a>
   </li>
 </ul>