Ajout composant ScoreAndVote.

+<script lang="ts" setup>
+//#region --Props--.
+const props = defineProps({
+  score: {
+    type: Number,
+    required: true,
+    nullable: false,
+  },
+  nbVote: {
+    type: Number,
+    required: true,
+    nullable: false,
+  },
+});
+//#endregion
+
+//#region --Function--.
+/**
+ * Format vote count if > 1000.
+ * @param count
+ */
+const formatVoteCount = (count: number) => {
+  if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}k votes`;
+  }
+  return `${count} votes`;
+};
+//#endregion
+</script>
+
+<template>
+  <section class="flex items-center mb-6">
+    <section class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center font-bold mr-3">
+      {{ score.toFixed(1) }}
+    </section>
+    <section>
+      <p class="font-semibold">Note TMDB</p>
+      <div class="text-sm text-gray-400">{{ formatVoteCount(nbVote) }}</div>
+    </section>
+  </section>
+</template>
+
+<style scoped></style>

@@ -91,17 +91,6 @@ const formatRuntime = (minutes: number) => {
   return `${hours}h ${mins}min`;
   return `${hours}h ${mins}min`;
 };
 };
 
 
-/**
- * Format vote count if > 1000.
- * @param count
- */
-const formatVoteCount = (count: number) => {
-  if (count >= 1000) {
-    return `${(count / 1000).toFixed(1)}k votes`;
-  }
-  return `${count} votes`;
-};
-
 async function fetchCredits(id: number | string) {
 async function fetchCredits(id: number | string) {
   try {
   try {
     const data = (await fetchMovieCredits(id)) as CreditsResponse;
     const data = (await fetchMovieCredits(id)) as CreditsResponse;
@@ -180,15 +169,7 @@ onMounted(() => {
             </p>
             </p>
 
 
             <!-- Note et votes -->
             <!-- Note et votes -->
-            <div class="flex items-center mb-6">
-              <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center font-bold mr-3">
-                {{ movie.vote_average.toFixed(1) }}
-              </div>
-              <div>
-                <div class="font-semibold">Note TMDB</div>
-                <div class="text-sm text-gray-400">{{ formatVoteCount(movie.vote_count) }}</div>
-              </div>
-            </div>
+            <details-score-and-vote :nb-vote="movie.vote_count" :score="movie.vote_average" />
 
 
             <!-- Genres -->
             <!-- Genres -->
             <div class="mb-6">
             <div class="mb-6">
@@ -213,7 +194,12 @@ onMounted(() => {
               </div>
               </div>
               <div v-if="movie.credit.cast.length > 0">
               <div v-if="movie.credit.cast.length > 0">
                 <span class="font-semibold">Têtes d'affiche:</span>
                 <span class="font-semibold">Têtes d'affiche:</span>
-                {{ movie.credit.cast.slice(0, 5).map(person => person.name).join(', ') }}
+                {{
+                  movie.credit.cast
+                    .slice(0, 5)
+                    .map((person) => person.name)
+                    .join(", ")
+                }}
               </div>
               </div>
             </div>
             </div>
           </div>
           </div>
@@ -223,4 +209,4 @@ onMounted(() => {
   </section>
   </section>
 </template>
 </template>
 
 
-<style scoped></style>
+<style scoped></style>