Ajout composant MovieGender.

+<script lang="ts" setup>
+//#region --Props--.
+import type { Genre } from "~/interfaces/movie";
+
+const props = defineProps({
+  genres: {
+    type: Array<Genre>,
+    required: true,
+    nullable: false,
+  },
+});
+//#endregion
+</script>
+
+<template>
+  <section class="mb-6">
+    <div class="flex flex-wrap gap-2">
+      <span v-for="genre in genres" :key="genre.id" class="px-3 py-1 bg-gray-800 rounded-full text-sm">
+        {{ genre.name }}
+      </span>
+    </div>
+  </section>
+</template>
+
+<style scoped></style>

@@ -20,7 +20,7 @@ export interface MovieInterface {
   credit: CreditsResponse;
   credit: CreditsResponse;
 }
 }
 
 
-type Genre = {
+export type Genre = {
   id: number,
   id: number,
   name: string,
   name: string,
 }
 }

@@ -172,13 +172,7 @@ onMounted(() => {
             <details-score-and-vote :nb-vote="movie.vote_count" :score="movie.vote_average" />
             <details-score-and-vote :nb-vote="movie.vote_count" :score="movie.vote_average" />
 
 
             <!-- Genres -->
             <!-- Genres -->
-            <div class="mb-6">
-              <div class="flex flex-wrap gap-2">
-                <span v-for="genre in movie.genres" :key="genre.id" class="px-3 py-1 bg-gray-800 rounded-full text-sm">
-                  {{ genre.name }}
-                </span>
-              </div>
-            </div>
+            <details-movie-gender :genres="movie.genres" />
 
 
             <!-- Synopsis -->
             <!-- Synopsis -->
             <div class="mb-6">
             <div class="mb-6">