Merge branch 'main' into bug/colors

src/features/search/components/Searchbar.vue

@@ -18,6 +18,9 @@ limitations under the License.
 const searchQuery = defineModel();
 
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const router = useRouter()
 const props = defineProps(['autoSubmit'])
@@ -38,10 +41,10 @@ const submitSearch = function () {
             <input
                 v-model="searchQuery"
                 type="search"
-                placeholder="Search..."
+                :placeholder="t('search.searchBar.placeholder')"
                 required
             />
-            <button type="submit" class="search-button">Search</button>
+            <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
         </div>
     </form>
     </template>

src/features/search/views/SearchResultsView.vue

@@ -17,6 +17,10 @@ limitations under the License.
 <script setup>
 import Searchbar from '@/features/search/components/Searchbar.vue';
 
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 const props = defineProps(['searchQuery']);
 
 const searchQueryModel = defineModel();
@@ -28,8 +32,8 @@ searchQueryModel.value = props.searchQuery;
 
     <div class="search-results-error-message-container">
         <div class="search-results-error-message">
-            <p>Search is not available right now.</p>
-            <p>Please try again to another time.</p>
+            <p>{{ t('search.error.searchNotAvailable') }}</p>
+            <p>{{ t('error.tryAgainToAnotherTime') }}</p>
         </div>
     </div>
     <div class="search-results-container">