work continuation

frontend/src/components/Movie.vue

 <template>
-  <table>
-    <thead>
-      <th>Titre</th>
-      <th>Date de sortie</th>
-      <th>Image</th>
-    </thead>
-    <tbody>
-      <tr v-for="movie in movies" :key="movie.id">
-        <td>{{ movie.title }}</td>
-        <td>{{ movie.release_date }}</td>
-        <td>
+  <div class="child">
     <img
+      class="movieImage"
       :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
     />
-        </td>
-      </tr>
-    </tbody>
-  </table>
+    <h2>{{ movie.title }}</h2>
+    <h3>{{ movie.release_date }}</h3>
+  </div>
 </template>
 
 <script>
 export default {
   props: {
-    movies: Array,
+    movie: Array,
   },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.movieImage {
+  width: 50%;
+}
+.child {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th,
+td {
+  border: 1px solid #000000;
+  padding: 10px;
+}
+</style>

frontend/src/components/MovieInfos.vue

+<template>
+  <img
+    :src="'https://image.tmdb.org/t/p/original/' + posterPath"
+    hightd="100%"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    posterPath: String,
+  },
+};
+</script>
+
+<style scoped></style>

frontend/src/components/MoviePoster.vue

+<template>
+  <img
+    :src="'https://image.tmdb.org/t/p/original/' + posterPath"
+    hightd="100%"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    posterPath: String,
+  },
+};
+</script>
+
+<style scoped></style>

frontend/src/views/MoviePage.vue

@@ -4,22 +4,23 @@
     <p class="movie-title">
       {{ moviesInfos.title }}
     </p>
-    <p>
-      <img
-        :src="'https://image.tmdb.org/t/p/original/' + moviesInfos.poster_path"
-        withd="100"
-        height="300"
-      />
-    </p>
+    <div>
+      <MoviePoster :posterPath="moviesInfos.poster_path" />
+      <MovieInfos :infos="moviesInfos.poster_path" />
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import MoviePoster from "@/components/MoviePoster.vue";
 const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
 
 export default {
   name: "Home",
+  components: {
+    MoviePoster,
+  },
   data: function () {
     return {
       movieId: "",