Ajout composant Poster.

Déclacement du composant SearchBar dans le fichier ui-components.

 <script lang="ts" setup>
 <script lang="ts" setup>
 //#region --import--.
 //#region --import--.
-import SearchBar from "~/components/SearchBar.vue";
 import { onBeforeUnmount, ref } from "vue";
 import { onBeforeUnmount, ref } from "vue";
 import { useTMDB } from "~/composables/tMDB";
 import { useTMDB } from "~/composables/tMDB";
 import { Movie } from "~/models/movie";
 import { Movie } from "~/models/movie";
@@ -155,7 +154,7 @@ onBeforeUnmount(() => {
   <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 -->
     <!-- Barre de recherche -->
-    <search-bar
+    <ui-components-search-bar
       placeholder="Rechercher un film..."
       placeholder="Rechercher un film..."
       @event:search="handleSearchEvent"
       @event:search="handleSearchEvent"
       @event:clear_search="handleClearSearchEvent"
       @event:clear_search="handleClearSearchEvent"

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Props--.
+//#region --Import--.
 import type { Genre } from "~/interfaces/movie";
 import type { Genre } from "~/interfaces/movie";
+//#endregion
 
 
-const props = defineProps({
+//#region --Props--.
+defineProps({
   genres: {
   genres: {
     type: Array<Genre>,
     type: Array<Genre>,
     required: true,
     required: true,

+<script setup lang="ts">
+//#region --Props--.
+import { FilmIcon } from "lucide-vue-next";
+
+defineProps({
+  src: {
+    type: String,
+    required: true,
+    nullable: false,
+  },
+  title: {
+    type: String,
+    required: true,
+    nullable: false,
+  },
+});
+//#endregion
+</script>
+
+<template>
+  <section class="w-full md:w-1/3 lg:w-1/4">
+    <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800">
+      <img
+        v-if="src"
+        :alt="title"
+        :src="`https://image.tmdb.org/t/p/w500${src}`"
+        class="w-full h-auto"
+      />
+      <div v-else class="aspect-[2/3] bg-gray-700 flex items-center justify-center">
+        <FilmIcon :size="64" class="text-gray-500" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+
+</style>

@@ -147,22 +147,10 @@ onMounted(() => {
 
 
         <div class="flex flex-col md:flex-row gap-8">
         <div class="flex flex-col md:flex-row gap-8">
           <!-- Poster -->
           <!-- Poster -->
-          <div class="w-full md:w-1/3 lg:w-1/4">
-            <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800">
-              <img
-                v-if="movie.poster_path"
-                :alt="movie.title"
-                :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
-                class="w-full h-auto"
-              />
-              <div v-else class="aspect-[2/3] bg-gray-700 flex items-center justify-center">
-                <FilmIcon :size="64" class="text-gray-500" />
-              </div>
-            </div>
-          </div>
+          <ui-components-poster v-if="movie.poster_path" :src="movie.poster_path" :title="movie.title" />
 
 
           <!-- Informations du film -->
           <!-- Informations du film -->
-          <div class="w-full md:w-2/3 lg:w-3/4">
+          <section class="w-full md:w-2/3 lg:w-3/4">
             <h1 class="text-3xl md:text-4xl font-bold mb-2">{{ movie.title }}</h1>
             <h1 class="text-3xl md:text-4xl font-bold mb-2">{{ movie.title }}</h1>
             <p v-if="movie.release_date" class="text-gray-400 mb-4">
             <p v-if="movie.release_date" class="text-gray-400 mb-4">
               {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }}
               {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }}
@@ -196,7 +184,7 @@ onMounted(() => {
                 }}
                 }}
               </div>
               </div>
             </div>
             </div>
-          </div>
+          </section>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>