Bruno Predot / tmdb_test

Go to a project
Toggle navigation Toggle navigation pinning
Bruno Predot
663fd56d 2 parents 767c5919 f8a3b1a6

Merge tag '0.3.3' into develop 

0.3.3
Inline Side-by-side
Showing 15 changed files with 204 additions and 53 deletions
@@ -26,9 +26,15 @@ defineProps({ @@ -26,9 +26,15 @@ defineProps({
26 :alt="movie.title" 26 :alt="movie.title"
27 :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" 27 :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
28 class="absolute inset-0 w-full h-full object-cover" 28 class="absolute inset-0 w-full h-full object-cover"
  29 + >
  30 + <div
  31 + v-else
  32 + class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center"
  33 + >
  34 + <FilmIcon
  35 + :size="48"
  36 + class="text-gray-500"
29 /> 37 />
30 - <div v-else class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center">  
31 - <FilmIcon :size="48" class="text-gray-500" />  
32 </div> 38 </div>
33 <div 39 <div
34 class="absolute top-2 right-2 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold" 40 class="absolute top-2 right-2 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold"
@@ -35,27 +35,49 @@ watch( @@ -35,27 +35,49 @@ watch(
35 <template> 35 <template>
36 <section> 36 <section>
37 <!-- Liste des commentaires --> 37 <!-- Liste des commentaires -->
38 - <section v-if="comments.length > 0" class="mt-10"> 38 + <section
  39 + v-if="comments.length > 0"
  40 + class="mt-10"
  41 + >
39 <h2>Commentaires publiés</h2> 42 <h2>Commentaires publiés</h2>
40 - <div v-for="(comment, index) in comments" :key="index" class="bg-gray-800 rounded-lg p-6 mb-4"> 43 + <div
  44 + v-for="(comment, index) in comments"
  45 + :key="index"
  46 + class="bg-gray-800 rounded-lg p-6 mb-4"
  47 + >
41 <div class="flex justify-between items-start mb-2"> 48 <div class="flex justify-between items-start mb-2">
42 <section> 49 <section>
43 - <h4 class="font-bold text-lg">Par {{ comment.username }}</h4> 50 + <h4 class="font-bold text-lg">
44 - <p class="text-sm text-gray-400">Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}</p> 51 + Par {{ comment.username }}
  52 + </h4>
  53 + <p class="text-sm text-gray-400">
  54 + Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}
  55 + </p>
45 </section> 56 </section>
46 <section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold"> 57 <section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
47 {{ comment.rating }} 58 {{ comment.rating }}
48 </section> 59 </section>
49 </div> 60 </div>
50 - <p :id="`message${index}`" class="text-gray-300"> 61 + <p
  62 + :id="`message${index}`"
  63 + class="text-gray-300"
  64 + >
51 {{ comment.message }} 65 {{ comment.message }}
52 </p> 66 </p>
53 </div> 67 </div>
54 </section> 68 </section>
55 <!-- Si aucun commentaire --> 69 <!-- Si aucun commentaire -->
56 - <section v-else class="text-center py-8 bg-gray-800 rounded-lg mt-10"> 70 + <section
57 - <MessageSquareIcon :size="48" class="mx-auto mb-3 text-gray-600" /> 71 + v-else
58 - <p class="text-gray-400">Aucun commentaire pour le moment. Soyez le premier à donner votre avis !</p> 72 + class="text-center py-8 bg-gray-800 rounded-lg mt-10"
  73 + >
  74 + <MessageSquareIcon
  75 + :size="48"
  76 + class="mx-auto mb-3 text-gray-600"
  77 + />
  78 + <p class="text-gray-400">
  79 + Aucun commentaire pour le moment. Soyez le premier à donner votre avis !
  80 + </p>
59 </section> 81 </section>
60 </section> 82 </section>
61 </template> 83 </template>
@@ -151,7 +151,9 @@ onBeforeUnmount(() => { @@ -151,7 +151,9 @@ onBeforeUnmount(() => {
151 151
152 <template> 152 <template>
153 <section> 153 <section>
154 - <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1> 154 + <h1 class="text-4xl font-bold mb-8 text-center">
  155 + Découvrez les films populaires
  156 + </h1>
155 <!-- Barre de recherche --> 157 <!-- Barre de recherche -->
156 <ui-components-search-bar 158 <ui-components-search-bar
157 placeholder="Rechercher un film..." 159 placeholder="Rechercher un film..."
@@ -167,24 +169,46 @@ onBeforeUnmount(() => { @@ -167,24 +169,46 @@ onBeforeUnmount(() => {
167 /> 169 />
168 170
169 <!-- Liste des films --> 171 <!-- Liste des films -->
170 - <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"> 172 + <div
171 - <div v-for="movie in movies" :key="movie.id"> 173 + v-else-if="movies.length > 0"
  174 + class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
  175 + >
  176 + <div
  177 + v-for="movie in movies"
  178 + :key="movie.id"
  179 + >
172 <movie-card :movie="movie" /> 180 <movie-card :movie="movie" />
173 </div> 181 </div>
174 </div> 182 </div>
175 183
176 <!-- Message si aucun film trouvé --> 184 <!-- Message si aucun film trouvé -->
177 - <section v-else-if="searchQuery && !movies.length" class="text-center py-12"> 185 + <section
178 - <SearchXIcon :size="64" class="mx-auto mb-4 text-gray-600" /> 186 + v-else-if="searchQuery && !movies.length"
179 - <h3 class="text-xl font-bold mb-2">Aucun film trouvé</h3> 187 + class="text-center py-12"
180 - <p class="text-gray-400">Essayez avec un autre terme de recherche</p> 188 + >
  189 + <SearchXIcon
  190 + :size="64"
  191 + class="mx-auto mb-4 text-gray-600"
  192 + />
  193 + <h3 class="text-xl font-bold mb-2">
  194 + Aucun film trouvé
  195 + </h3>
  196 + <p class="text-gray-400">
  197 + Essayez avec un autre terme de recherche
  198 + </p>
181 </section> 199 </section>
182 200
183 <!-- Loader pour le chargement de plus de films --> 201 <!-- Loader pour le chargement de plus de films -->
184 - <ui-components-loader :is-initial-loading="isInitialLoading" :is-loading="isLoadingMore" /> 202 + <ui-components-loader
  203 + :is-initial-loading="isInitialLoading"
  204 + :is-loading="isLoadingMore"
  205 + />
185 206
186 <!-- Élément observé pour le défilement infini --> 207 <!-- Élément observé pour le défilement infini -->
187 - <div ref="loadMoreTrigger" class="h-10 mt-4" /> 208 + <div
  209 + ref="loadMoreTrigger"
  210 + class="h-10 mt-4"
  211 + />
188 </section> 212 </section>
189 </template> 213 </template>
190 214
@@ -17,7 +17,11 @@ defineProps({ @@ -17,7 +17,11 @@ defineProps({
17 <template> 17 <template>
18 <section class="mb-6"> 18 <section class="mb-6">
19 <div class="flex flex-wrap gap-2"> 19 <div class="flex flex-wrap gap-2">
20 - <span v-for="genre in genres" :key="genre.id" class="px-3 py-1 bg-gray-800 rounded-full text-sm"> 20 + <span
  21 + v-for="genre in genres"
  22 + :key="genre.id"
  23 + class="px-3 py-1 bg-gray-800 rounded-full text-sm"
  24 + >
21 {{ genre.name }} 25 {{ genre.name }}
22 </span> 26 </span>
23 </div> 27 </div>
@@ -34,7 +34,9 @@ const formatVoteCount = (count: number) => { @@ -34,7 +34,9 @@ const formatVoteCount = (count: number) => {
34 {{ score.toFixed(1) }} 34 {{ score.toFixed(1) }}
35 </section> 35 </section>
36 <section> 36 <section>
37 - <p class="font-semibold">Note TMDB</p> 37 + <p class="font-semibold">
  38 + Note TMDB
  39 + </p>
38 <div class="text-sm text-gray-400"> 40 <div class="text-sm text-gray-400">
39 {{ formatVoteCount(nbVote) }} 41 {{ formatVoteCount(nbVote) }}
40 </div> 42 </div>
@@ -123,13 +123,22 @@ function handleMessageEvent(event: string) { @@ -123,13 +123,22 @@ function handleMessageEvent(event: string) {
123 } 123 }
124 " 124 "
125 > 125 >
126 - <span v-if="isSubmitting" class="flex items-center justify-center"> 126 + <span
  127 + v-if="isSubmitting"
  128 + class="flex items-center justify-center"
  129 + >
127 <span class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" /> 130 <span class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
128 Envoi en cours... 131 Envoi en cours...
129 </span> 132 </span>
130 <span v-else>Publier le commentaire</span> 133 <span v-else>Publier le commentaire</span>
131 </v-btn> 134 </v-btn>
132 - <v-btn class="mt-6 mr-4" color="primary" @click="clear"> effacer </v-btn> 135 + <v-btn
  136 + class="mt-6 mr-4"
  137 + color="primary"
  138 + @click="clear"
  139 + >
  140 + effacer
  141 + </v-btn>
133 </VForm> 142 </VForm>
134 </section> 143 </section>
135 </template> 144 </template>
@@ -17,7 +17,10 @@ defineProps({ @@ -17,7 +17,10 @@ defineProps({
17 </script> 17 </script>
18 18
19 <template> 19 <template>
20 - <section v-if="isLoading && !isInitialLoading" class="flex justify-center mt-8"> 20 + <section
  21 + v-if="isLoading && !isInitialLoading"
  22 + class="flex justify-center mt-8"
  23 + >
21 <div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin" /> 24 <div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin" />
22 </section> 25 </section>
23 </template> 26 </template>
@@ -20,9 +20,20 @@ defineProps({ @@ -20,9 +20,20 @@ defineProps({
20 <template> 20 <template>
21 <section class="w-full md:w-1/3 lg:w-1/4"> 21 <section class="w-full md:w-1/3 lg:w-1/4">
22 <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800"> 22 <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800">
23 - <v-img v-if="src" :alt="title" :src="`https://image.tmdb.org/t/p/w500${src}`" class="w-full h-auto" /> 23 + <v-img
24 - <div v-else class="aspect-[2/3] bg-gray-700 flex items-center justify-center"> 24 + v-if="src"
25 - <FilmIcon :size="64" class="text-gray-500" /> 25 + :alt="title"
  26 + :src="`https://image.tmdb.org/t/p/w500${src}`"
  27 + class="w-full h-auto"
  28 + />
  29 + <div
  30 + v-else
  31 + class="aspect-[2/3] bg-gray-700 flex items-center justify-center"
  32 + >
  33 + <FilmIcon
  34 + :size="64"
  35 + class="text-gray-500"
  36 + />
26 </div> 37 </div>
27 </div> 38 </div>
28 </section> 39 </section>
@@ -49,7 +49,7 @@ function handleClearSearchEvent() { @@ -49,7 +49,7 @@ function handleClearSearchEvent() {
49 class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary" 49 class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
50 type="text" 50 type="text"
51 @input="handleSearchEvent" 51 @input="handleSearchEvent"
52 - /> 52 + >
53 <button 53 <button
54 v-if="searchQuery" 54 v-if="searchQuery"
55 class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white" 55 class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
@@ -57,7 +57,10 @@ function handleClearSearchEvent() { @@ -57,7 +57,10 @@ function handleClearSearchEvent() {
57 > 57 >
58 <XIcon :size="20" /> 58 <XIcon :size="20" />
59 </button> 59 </button>
60 - <button v-else class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"> 60 + <button
  61 + v-else
  62 + class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
  63 + >
61 <SearchIcon :size="20" /> 64 <SearchIcon :size="20" />
62 </button> 65 </button>
63 </div> 66 </div>
@@ -18,8 +18,15 @@ defineProps({ @@ -18,8 +18,15 @@ defineProps({
18 18
19 <template> 19 <template>
20 <!-- Skeleton loader pendant le chargement initial --> 20 <!-- Skeleton loader pendant le chargement initial -->
21 - <section v-if="isInitialLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> 21 + <section
22 - <div v-for="i in skeletonNumber" :key="i" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse"> 22 + v-if="isInitialLoading"
  23 + class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
  24 + >
  25 + <div
  26 + v-for="i in skeletonNumber"
  27 + :key="i"
  28 + class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse"
  29 + >
23 <div class="h-80 bg-gray-700" /> 30 <div class="h-80 bg-gray-700" />
24 <div class="p-4"> 31 <div class="p-4">
25 <div class="h-6 bg-gray-700 rounded mb-3" /> 32 <div class="h-6 bg-gray-700 rounded mb-3" />
@@ -79,9 +79,16 @@ watch( @@ -79,9 +79,16 @@ watch(
79 79
80 <template> 80 <template>
81 <div> 81 <div>
82 - <editor v-model="content" :api-key="runtimeConfig.public.apiTinyMceSecret" :init="init" /> 82 + <editor
  83 + v-model="content"
  84 + :api-key="runtimeConfig.public.apiTinyMceSecret"
  85 + :init="init"
  86 + />
83 </div> 87 </div>
84 - <div v-if="errorMessage" class="text-red-500 text-sm mt-1"> 88 + <div
  89 + v-if="errorMessage"
  90 + class="text-red-500 text-sm mt-1"
  91 + >
85 {{ errorMessage }} 92 {{ errorMessage }}
86 </div> 93 </div>
87 </template> 94 </template>
@@ -3,7 +3,10 @@ @@ -3,7 +3,10 @@
3 <template> 3 <template>
4 <v-container class="bg-gray-900"> 4 <v-container class="bg-gray-900">
5 <v-row class="bg-gray-900"> 5 <v-row class="bg-gray-900">
6 - <v-col cols="12" sm="4"> 6 + <v-col
  7 + cols="12"
  8 + sm="4"
  9 + >
7 <v-skeleton-loader 10 <v-skeleton-loader
8 class="mx-auto border bg-gray-800" 11 class="mx-auto border bg-gray-800"
9 color="#1f2937" 12 color="#1f2937"
@@ -12,7 +15,10 @@ @@ -12,7 +15,10 @@
12 type="paragraph, image" 15 type="paragraph, image"
13 /> 16 />
14 </v-col> 17 </v-col>
15 - <v-col cols="12" sm="8"> 18 + <v-col
  19 + cols="12"
  20 + sm="8"
  21 + >
16 <v-skeleton-loader 22 <v-skeleton-loader
17 class="mx-auto mt-10" 23 class="mx-auto mt-10"
18 color="#1f2937" 24 color="#1f2937"
@@ -4,10 +4,14 @@ import js from "@eslint/js"; @@ -4,10 +4,14 @@ import js from "@eslint/js";
4 import eslintPluginVue from "eslint-plugin-vue"; 4 import eslintPluginVue from "eslint-plugin-vue";
5 import ts from "typescript-eslint"; 5 import ts from "typescript-eslint";
6 6
  7 +const TsConfigRecommended = ts.configs.recommended;
  8 +
7 export default withNuxt( 9 export default withNuxt(
8 // Your custom configs here 10 // Your custom configs here
9 js.configs.recommended, 11 js.configs.recommended,
10 - ...ts.configs.recommended, 12 + // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  13 + // @ts-expect-error
  14 + ...TsConfigRecommended,
11 ...eslintPluginVue.configs["flat/recommended"], 15 ...eslintPluginVue.configs["flat/recommended"],
12 { 16 {
13 files: ["*.vue", "**/*.vue"], 17 files: ["*.vue", "**/*.vue"],
@@ -10,9 +10,10 @@ @@ -10,9 +10,10 @@
10 "preview": "nuxt preview", 10 "preview": "nuxt preview",
11 "postinstall": "nuxt prepare", 11 "postinstall": "nuxt prepare",
12 "lint:js": "eslint --ext \".ts,.vue\" . --fix", 12 "lint:js": "eslint --ext \".ts,.vue\" . --fix",
13 - "lint:prettier": "prettier --write .", 13 + "lint:prettier": "prettier --write \"{components,pages,plugins,middleware,layouts,composables,assets}/**/*.{js,jsx,ts,tsx,vue,html,css,scss,json,md}\" .",
14 "lint": "npm run lint:js && npm run lint:prettier", 14 "lint": "npm run lint:js && npm run lint:prettier",
15 - "format": "prettier --write \"{components,pages,plugins,middleware,layouts,composables,assets}/**/*.{js,jsx,ts,tsx,vue,html,css,scss,json,md}\"", 15 + "format": "prettier --write \"{components,pages,plugins,middleware,layouts,composables,assets}/**/*.{js,jsx,ts,tsx,vue,html,css,scss,json,md}\" --list-different .",
  16 + "lintfix": "npm run format && npm run lint:js",
16 "test": "vitest" 17 "test": "vitest"
17 }, 18 },
18 "dependencies": { 19 "dependencies": {
@@ -153,9 +153,16 @@ onMounted(() => { @@ -153,9 +153,16 @@ onMounted(() => {
153 <ui-components-skeleton-movie-detail-loader v-if="isLoading" /> 153 <ui-components-skeleton-movie-detail-loader v-if="isLoading" />
154 154
155 <!-- Contenu du film --> 155 <!-- Contenu du film -->
156 - <div v-else-if="movie" class="relative"> 156 + <div
  157 + v-else-if="movie"
  158 + class="relative"
  159 + >
157 <!-- Backdrop image --> 160 <!-- Backdrop image -->
158 - <ui-components-backdrop-image v-if="movie.backdrop_path" :src="movie.backdrop_path" :title="movie.title" /> 161 + <ui-components-backdrop-image
  162 + v-if="movie.backdrop_path"
  163 + :src="movie.backdrop_path"
  164 + :title="movie.title"
  165 + />
159 166
160 <!-- Contenu principal --> 167 <!-- Contenu principal -->
161 <div class="container mx-auto px-4 py-8 relative z-10 pt-20"> 168 <div class="container mx-auto px-4 py-8 relative z-10 pt-20">
@@ -163,41 +170,64 @@ onMounted(() => { @@ -163,41 +170,64 @@ onMounted(() => {
163 class="flex items-center text-gray-400 hover:text-white mb-8 transition-colors" 170 class="flex items-center text-gray-400 hover:text-white mb-8 transition-colors"
164 @click="navigateTo('/')" 171 @click="navigateTo('/')"
165 > 172 >
166 - <ArrowLeftIcon :size="20" class="mr-2" /> 173 + <ArrowLeftIcon
  174 + :size="20"
  175 + class="mr-2"
  176 + />
167 Retour 177 Retour
168 </button> 178 </button>
169 179
170 <div class="flex flex-col md:flex-row gap-8"> 180 <div class="flex flex-col md:flex-row gap-8">
171 <!-- Poster --> 181 <!-- Poster -->
172 - <ui-components-poster v-if="movie.poster_path" :src="movie.poster_path" :title="movie.title" /> 182 + <ui-components-poster
  183 + v-if="movie.poster_path"
  184 + :src="movie.poster_path"
  185 + :title="movie.title"
  186 + />
173 187
174 <!-- Informations du film --> 188 <!-- Informations du film -->
175 <section class="w-full md:w-2/3 lg:w-3/4"> 189 <section class="w-full md:w-2/3 lg:w-3/4">
176 <h1 class="text-3xl md:text-4xl font-bold mb-2"> 190 <h1 class="text-3xl md:text-4xl font-bold mb-2">
177 {{ movie.title }} 191 {{ movie.title }}
178 </h1> 192 </h1>
179 - <p v-if="movie.release_date" class="text-gray-400 mb-4"> 193 + <p
  194 + v-if="movie.release_date"
  195 + class="text-gray-400 mb-4"
  196 + >
180 {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }} 197 {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }}
181 </p> 198 </p>
182 199
183 <!-- Note et votes --> 200 <!-- Note et votes -->
184 - <details-score-and-vote :nb-vote="movie.vote_count" :score="movie.vote_average" /> 201 + <details-score-and-vote
  202 + :nb-vote="movie.vote_count"
  203 + :score="movie.vote_average"
  204 + />
185 205
186 <!-- Genres --> 206 <!-- Genres -->
187 <details-movie-gender :genres="movie.genres" /> 207 <details-movie-gender :genres="movie.genres" />
188 208
189 <!-- Synopsis --> 209 <!-- Synopsis -->
190 <div class="mb-6"> 210 <div class="mb-6">
191 - <h2 class="text-xl font-bold mb-2">Synopsis</h2> 211 + <h2 class="text-xl font-bold mb-2">
  212 + Synopsis
  213 + </h2>
192 <p class="text-gray-300"> 214 <p class="text-gray-300">
193 {{ movie.overview || "Aucun synopsis disponible." }} 215 {{ movie.overview || "Aucun synopsis disponible." }}
194 </p> 216 </p>
195 </div> 217 </div>
196 218
197 <!-- Réalisateur et têtes d'affiche --> 219 <!-- Réalisateur et têtes d'affiche -->
198 - <div v-if="movie.credit" class="mb-6"> 220 + <div
199 - <h2 class="text-xl font-bold mb-2">Équipe</h2> 221 + v-if="movie.credit"
200 - <div v-if="director" class="mb-2"> 222 + class="mb-6"
  223 + >
  224 + <h2 class="text-xl font-bold mb-2">
  225 + Équipe
  226 + </h2>
  227 + <div
  228 + v-if="director"
  229 + class="mb-2"
  230 + >
201 <span class="font-semibold">Réalisateur:</span> {{ director.name }} 231 <span class="font-semibold">Réalisateur:</span> {{ director.name }}
202 </div> 232 </div>
203 <div v-if="movie.credit.cast.length > 0"> 233 <div v-if="movie.credit.cast.length > 0">
@@ -212,7 +242,9 @@ onMounted(() => { @@ -212,7 +242,9 @@ onMounted(() => {
212 </div> 242 </div>
213 </div> 243 </div>
214 <!-- Comments form. --> 244 <!-- Comments form. -->
215 - <h3 class="text-xl font-bold mt-8 mb-4">Ajouter un commentaire</h3> 245 + <h3 class="text-xl font-bold mt-8 mb-4">
  246 + Ajouter un commentaire
  247 + </h3>
216 <form-movie-comment-form @event:submit="handleSubmitEvent" /> 248 <form-movie-comment-form @event:submit="handleSubmitEvent" />
217 249
218 <!-- Liste des commentaires --> 250 <!-- Liste des commentaires -->
@@ -223,10 +255,20 @@ onMounted(() => { @@ -223,10 +255,20 @@ onMounted(() => {
223 </div> 255 </div>
224 256
225 <!-- Erreur --> 257 <!-- Erreur -->
226 - <section v-else class="container mx-auto px-4 py-16 text-center"> 258 + <section
227 - <AlertTriangleIcon :size="64" class="mx-auto mb-4 text-red-500" /> 259 + v-else
228 - <h2 class="text-2xl font-bold mb-2">Film non trouvé</h2> 260 + class="container mx-auto px-4 py-16 text-center"
229 - <p class="text-gray-400 mb-6">Nous n'avons pas pu trouver le film que vous cherchez.</p> 261 + >
  262 + <AlertTriangleIcon
  263 + :size="64"
  264 + class="mx-auto mb-4 text-red-500"
  265 + />
  266 + <h2 class="text-2xl font-bold mb-2">
  267 + Film non trouvé
  268 + </h2>
  269 + <p class="text-gray-400 mb-6">
  270 + Nous n'avons pas pu trouver le film que vous cherchez.
  271 + </p>
230 <button 272 <button
231 class="px-6 py-2 bg-primary text-white font-bold rounded-md hover:bg-primary-dark transition-colors" 273 class="px-6 py-2 bg-primary text-white font-bold rounded-md hover:bg-primary-dark transition-colors"
232 @click="navigateTo('/')" 274 @click="navigateTo('/')"