1  <script lang="ts" context="module">
 2      import type { ComponentProps } from 'svelte';
 3      import { writable } from 'svelte/store';
 4  
 5      import SearchInput from '@amp/web-app-components/src/components/SearchInput/SearchInput.svelte';
 6  
 7      type UnusedSearchInputProps = Pick<
 8          ComponentProps<SearchInput>,
 9          'currentTab' | 'menuItem'
10      >;
11  
12      // `SearchInput` requires a bunch of properties that are unnecessary
13      // for our use-case; they're defined here to keep them grouped together
14      const UNNEEDED_SEARCH_INPUT_PROPS: UnusedSearchInputProps = {
15          currentTab: writable(null),
16          menuItem: {
17              id: { type: 'search' },
18              // @ts-expect-error the `menuItem` is not relevant to us; we don't
19              // need to provide an icon for this
20              icon: null,
21          },
22      };
23  </script>
24  
25  <script lang="ts">
26      import type { WebSearchFlowAction } from '@jet-app/app-store/common/search/web-search-action';
27      import { makeCanonicalSearchResultsPageUrl } from '@jet-app/app-store/common/search/search-page-url';
28  
29      import { getJet } from '~/jet';
30      import { getI18n } from '~/stores/i18n';
31  
32      const i18n = getI18n();
33      const jet = getJet();
34  
35      export let searchAction: WebSearchFlowAction;
36      export let big: boolean = false;
37  
38      function dispatchSearchAction(event: CustomEvent<{ term: string }>) {
39          const { term } = event.detail;
40  
41          searchAction.destination.term = term;
42  
43          searchAction.pageUrl = makeCanonicalSearchResultsPageUrl(
44              jet.objectGraph,
45              searchAction.destination,
46          );
47  
48          jet.perform(searchAction);
49      }
50  </script>
51  
52  <div class="search-input-wrapper" class:big>
53      <SearchInput
54          {...UNNEEDED_SEARCH_INPUT_PROPS}
55          defaultValue={searchAction?.destination?.term}
56          translateFn={(key) => $i18n.t(key)}
57          on:makeSearchQueryFromInput={dispatchSearchAction}
58      />
59  </div>
60  
61  <style>
62      .search-input-wrapper {
63          --searchBoxIconFill: var(--keyColor);
64          position: relative;
65          display: flex;
66          flex-direction: column;
67          justify-content: center;
68      }
69  
70      .search-input-wrapper.big :global(.search-input__text-field) {
71          height: 48px;
72          padding-inline-start: 40px;
73          font: var(--title-2);
74          border-radius: 8px;
75      }
76  
77      .search-input-wrapper.big :global(.search-svg) {
78          width: 16px;
79          height: auto;
80          inset: 16px 0 0 13px;
81      }
82  </style>