Ajout de la liste des premiers films.

@@ -4,7 +4,9 @@ import SearchBar from "~/components/SearchBar.vue";
 import { ref } from "vue";
 import { ref } from "vue";
 import { useTMDB } from "~/composables/tMDB";
 import { useTMDB } from "~/composables/tMDB";
 import { Movie } from "~/models/movie";
 import { Movie } from "~/models/movie";
+import { FilmIcon } from "lucide-vue-next";
 import type { MovieInterface } from "~/interfaces/movie";
 import type { MovieInterface } from "~/interfaces/movie";
+import { useDateFormat } from '@vueuse/core'
 //#endregion
 //#endregion
 
 
 //#region --Declaration--.
 //#region --Declaration--.
@@ -61,9 +63,36 @@ onMounted(() => {
     <!-- Barre de recherche -->
     <!-- Barre de recherche -->
     <search-bar placeholder="Rechercher un film..." />
     <search-bar placeholder="Rechercher un film..." />
     <!-- Loading Skeleton -->
     <!-- Loading Skeleton -->
-    <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" />
+    <skeleton-movies-loader v-if="isInitialLoading" :is-initial-loading="isInitialLoading" :skeleton-number="20" />
     <!-- Liste des films -->
     <!-- Liste des films -->
-    <!--    <pre>{{ movies }}</pre>-->
+    <div v-else-if="movies.length > 0" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      <div
+        v-for="movie in movies"
+        :key="movie.id"
+        class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105 cursor-pointer"
+      >
+        <div class="relative pb-[150%]">
+          <img
+            v-if="movie.poster_path"
+            :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
+            :alt="movie.title"
+            class="absolute inset-0 w-full h-full object-cover"
+          >
+          <div v-else class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center">
+            <FilmIcon :size="48" class="text-gray-500" />
+          </div>
+          <div
+            class="absolute top-2 right-2 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold"
+          >
+            {{ movie.vote_average.toFixed(1) }}
+          </div>
+        </div>
+        <div class="p-4">
+          <h2 class="text-lg font-bold mb-1 line-clamp-1">{{ movie.title }}</h2>
+          <p class="text-sm text-gray-400">{{ useDateFormat(movie.release_date, 'DD-MM-YYYY') }}</p>
+        </div>
+      </div>
+    </div>
   </section>
   </section>
 </template>
 </template>