Pinafore-Web-Client-Frontend/routes/_components/search/Search.html

<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>