<form class="search-input-form" on:submit="onSubmit(event)"> <div class="search-input-wrapper"> <input type="search" class="search-input" placeholder="Search" aria-label="Search input" required bind:value="$queryInSearch"> </div> <button type="submit" class="primary search-button" aria-label="Search" disabled="{{$searchLoading}}"> <svg class="search-button-svg"> <use xlink:href="#fa-search" /> </svg> </button> </form> {{#if $searchLoading}} <div class="search-results-container"> <LoadingPage /> </div> {{elseif $searchResults && $searchResultsForQuery === $queryInSearch}} <div class="search-results-container"> <SearchResults /> </div> {{/if}} <style> .search-input-form { display: grid; grid-template-columns: 1fr min-content; grid-gap: 10px; } .search-input-wrapper { position: relative; display: flex; justify-content: center; align-items: center; } .search-input { padding: 10px 15px; border-radius: 10px; flex: 1; } .search-button-svg { fill: var(--button-primary-text); width: 18px; height: 18px; flex: 1; } .search-results-container { position: relative; margin-top: 20px; } @media (min-width: 768px) { .search-button { min-width: 100px; } } </style> <script> import { store } from '../../_store/store' import LoadingPage from '../LoadingPage.html' import { doSearch } from '../../_actions/search' import SearchResults from './SearchResults.html' export default { store: () => store, components: { LoadingPage, SearchResults }, methods: { async onSubmit (e) { e.preventDefault() doSearch() } } } </script>