Add a placeholder to the SearchBox component

resources/js/components/SearchBox.vue

@@ -5,6 +5,7 @@
             type: Boolean,
             default: false
         },
+        placeholder: String,
     })
     const searchInput = ref(null)
 
@@ -37,6 +38,7 @@
                 tabindex="1"
                 :aria-label="$t('commons.search')"
                 :title="$t('commons.search')"
+                :placeholder="placeholder"
                 class="input is-rounded is-search"
                 :class="{ 'has-no-background': hasNoBackground }"
                 :value="keyword"

resources/js/views/admin/Users.vue

@@ -129,7 +129,7 @@
                 <!-- search -->
                 <div class="columns">
                     <div class="column pb-0">
-                        <SearchBox v-model:keyword="searched" :hasNoBackground="true" />
+                        <SearchBox v-model:keyword="searched" :hasNoBackground="true" :placeholder="$t('admin.search_user_placeholder')" />
                     </div>
                 </div>
                 <div class="buttons is-centered mb-0">

resources/lang/en/admin.php

@@ -21,6 +21,7 @@
     'admin_settings' => 'Admin settings',
     'create_new_user' => 'Create a user',
     'new_user' => 'New user',
+    'search_user_placeholder' => 'User name, email...',
     'user_created' => 'user successfully created',
     'confirm' => [
         'delete_user' => 'Are you sure you want to delete this user? There is no going back.',