Ajout props placeholder pour searchBar componant.

 <script setup lang="ts">
 <script setup lang="ts">
-
+import SearchBar from "~/components/SearchBar.vue";
 </script>
 </script>
 
 
 <template>
 <template>
   <section>
   <section>
     <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
     <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
+    <!-- Barre de recherche -->
+    <search-bar placeholder="Rechercher un film..."/>
   </section>
   </section>
 </template>
 </template>
 
 

@@ -8,6 +8,17 @@ import { ref } from "vue";
 // const emit = defineEmits([]);
 // const emit = defineEmits([]);
 //#endregion
 //#endregion
 
 
+//#region --Props--.
+const props = defineProps({
+  placeholder: {
+    type: String,
+    required: true,
+    nullable: false,
+    default: ''
+  }
+})
+//#endregion
+
 //#region --Data/refs--.
 //#region --Data/refs--.
 const searchQuery = ref("");
 const searchQuery = ref("");
 //#endregion
 //#endregion
@@ -20,7 +31,7 @@ const searchQuery = ref("");
       <input
       <input
         v-model="searchQuery"
         v-model="searchQuery"
         type="text"
         type="text"
-        placeholder="Rechercher un film..."
+        :placeholder="placeholder"
         class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
         class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
         @input="console.log('debouncedSearch à prévoir')"
         @input="console.log('debouncedSearch à prévoir')"
       />
       />