Création du composant SearchBar.

@@ -3,3 +3,4 @@
 - Ajout page index.
 - Ajout page index.
 - Modification app.vue afin d'initialiser l'app avec vuetify et NuxtPage pour démarrer sur la page index.
 - Modification app.vue afin d'initialiser l'app avec vuetify et NuxtPage pour démarrer sur la page index.
 - Création du composant MoviesList.
 - Création du composant MoviesList.
+- Création du composant SearchBar.

+<script setup lang="ts">
+//#region --import--.
+import { SearchIcon, XIcon } from "lucide-vue-next";
+import { ref } from "vue";
+//#endregion
+
+//#region --Emits--.
+// const emit = defineEmits([]);
+//#endregion
+
+//#region --Data/refs--.
+const searchQuery = ref("");
+//#endregion
+</script>
+
+<template>
+  <!-- Barre de recherche -->
+  <section class="mb-8">
+    <div class="relative max-w-xl mx-auto">
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Rechercher un film..."
+        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')"
+      />
+      <button
+        v-if="searchQuery"
+        class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
+        @click="console.log('clearSearch à prévoir')"
+      >
+        <XIcon :size="20" />
+      </button>
+      <button v-else class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+        <SearchIcon :size="20" />
+      </button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+
+</style>