60 lines
2.5 KiB
HTML
60 lines
2.5 KiB
HTML
<div class="searchcontainer">
|
|
<form class="inputSearch" (ngSubmit)="onSubmit()">
|
|
<label class="input">
|
|
<svg
|
|
class="h-[1em] opacity-50"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke-width="2.5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
>
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.3-4.3"></path>
|
|
</g>
|
|
</svg>
|
|
<input type="search" [value]="searchString()" (input)="updateSearch($event)" class="grow" placeholder="Search" />
|
|
<kbd class="kbd kbd-sm">⌘</kbd>
|
|
<kbd class="kbd kbd-sm">K</kbd>
|
|
</label>
|
|
<button class="btn">Submit</button>
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
<!-- TODO why the fuck is nasaData an array?-->
|
|
@if(searchResults()!==null){
|
|
@for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
|
|
<li class="list-row">
|
|
<!-- 2 for small image -->
|
|
<div><img class="size-10 rounded-box" src="{{el.links[1].href}}"/></div>
|
|
<div>
|
|
<div>{{el.data[0].title}}</div>
|
|
<div class="text-xs uppercase font-semibold opacity-60">Photographer: {{el.data[0].photographer}}</div>
|
|
</div>
|
|
<p class="list-col-wrap text-xs">
|
|
{{el.data[0].description}}
|
|
</p>
|
|
<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>
|
|
<!-- <button class="btn btn-square btn-ghost">
|
|
<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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
|
|
</button> -->
|
|
</li>
|
|
}
|
|
}
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|