add Multilangues to Index and Search

mirsella · Dec 30, 2024 · 437404f · 437404f
1 parent 5aa10b2
commit 437404f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 22 deletions.
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -43,5 +43,24 @@
     "Director": "Director",
     "Runtime": "Runtime",
     "ReleaseDate": "Release date"
+  },
+
+  "searchMovies": {
+    "searchInput": "Search movies...",
+    "SectionFilters": "Filters",
+    "filtersAscending": "Ascending",
+    "filtersDescending": "Descending",
+    "sortTitle": "Title",
+    "sortRating": "Rating",
+    "sortReleaseYear": "Release Year",
+    "sortPopularity": "Popularity",
+    "filtersGenres": "All Genres",
+    "filterYear": "Year",
+    "stateNoMovies": "No movies found",
+    "stateNoMoreMovies": "No more movies"
+  },
+
+  "IndexMovies": {
+    "SectionPopular": "Popular Movies"
   }
 }
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
@@ -43,5 +43,24 @@
     "Director": "Directeur",
     "Runtime": "Durée",
     "ReleaseDate": "Date de sorti"
+  },
+
+  "searchMovies": {
+    "searchInput": "Recherche un Film...",
+    "SectionFilters": "Filtres",
+    "filtersAscending": "Croissant",
+    "filtersDescending": "Décroissant",
+    "sortTitle": "Titre",
+    "sortRating": "Note",
+    "sortReleaseYear": "Année de sortie",
+    "sortPopularity": "Popularité",
+    "filtersGenres": "Tous les Genres",
+    "filterYear": "Année",
+    "stateNoMovies": "Pas de Film trouvé",
+    "stateNoMoreMovies": "Plus de Film disponible"
+  },
+
+  "IndexMovies": {
+    "SectionPopular": "Films Populaires"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,20 +1,16 @@
 <template>
     <div class="container mx-auto p-4">
         <div class="flex w-full flex-col">
-            <div class="divider divider-start text-xl">Popular Movies</div>
+            <div class="divider divider-start text-xl">{{ $t("IndexMovies.SectionPopular") }}</div>
         </div>
 
         <!-- Movies Grid -->
-        <div
-            v-if="status === 'success' && movies?.results?.length"
+        <div v-if="status === 'success' && movies?.results?.length"
             class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
             <div v-for="movie in movies.results" :key="movie.id" class="card bg-base-100 shadow-xl">
                 <figure>
-                    <img
-                        :src="'https://image.tmdb.org/t/p/w500' + movie.poster_path"
-                        :alt="movie.title"
-                        class="w-full object-cover"
-                        loading="lazy" />
+                    <img :src="'https://image.tmdb.org/t/p/w500' + movie.poster_path" :alt="movie.title"
+                        class="w-full object-cover" loading="lazy" />
                 </figure>
                 <div class="card-body">
                     <div class="flex justify-between items-center">
@@ -29,7 +25,7 @@
                 </div>
             </div>
         </div>
-        <div v-else class="text-center py-8">No movies found</div>
+        <div v-else class="text-center py-8">{{ $t("searchMovies.stateNoMovies") }}</div>
     </div>
     <authSignIn />
 </template>

diff --git a/pages/search.vue b/pages/search.vue
@@ -2,39 +2,40 @@
 	<div class="container mx-auto p-4">
 		<!-- Search Section -->
 		<div class="mb-4">
-			<input v-model="searchQuery" @input="debounceSearch" type="text" placeholder="Search movies..."
-				class="input input-bordered w-full max-w-lg" />
+			<input v-model="searchQuery" @input="debounceSearch" type="text"
+				:placeholder="$t('searchMovies.searchInput')" class="input input-bordered w-full max-w-lg" />
 		</div>
 
 		<div className="flex w-full flex-col">
-			<div class="divider divider-start text-xl">Filters</div>
+			<div class="divider divider-start text-xl">{{ $t("searchMovies.SectionFilters") }}</div>
 		</div>
 		<!-- Filters Section -->
 		<div class="flex flex-wrap gap-4 mb-8">
 			<!-- Sort Direction -->
 			<select v-model="sortDirection" class="select select-bordered">
-				<option value="asc">Ascending</option>
-				<option value="desc">Descending</option>
+				<option value="asc">{{ $t("searchMovies.filtersAscending") }}</option>
+				<option value="desc">{{ $t("searchMovies.filtersDescending") }}</option>
 			</select>
 
 			<!-- Sort Options -->
 			<select v-model="sortBy" class="select select-bordered">
-				<option value="title">Name</option>
-				<option value="vote_average">Rating</option>
-				<option value="release_date">Release Year</option>
-				<option value="popularity">Popularity</option>
+				<option value="title">{{ $t("searchMovies.sortTitle") }}</option>
+				<option value="vote_average">{{ $t("searchMovies.sortRating") }}</option>
+				<option value="release_date">{{ $t("searchMovies.sortReleaseYear") }}</option>
+				<option value="popularity">{{ $t("searchMovies.sortPopularity") }}</option>
 			</select>
 
 			<!-- Genre Filter -->
 			<select v-model="selectedGenre" class="select select-bordered">
-				<option value="">All Genres</option>
+				<option value="">{{ $t("searchMovies.filtersGenres") }}</option>
 				<option v-for="genre in genres" :key="genre.id" :value="genre.id">
 					{{ genre.name }}
 				</option>
 			</select>
 
 			<!-- Year Filter -->
-			<input v-model="yearFilter" type="number" placeholder="Year" class="input input-bordered w-24" />
+			<input v-model="yearFilter" type="number" :placeholder="$t('searchMovies.filterYear')"
+				class="input input-bordered w-24" />
 
 		</div>
 
@@ -64,12 +65,12 @@
 
 		<!-- No Movies found State -->
 		<div v-if="filteredMovies.length === 0 && !loading" class="flex justify-center my-12">
-			<p class="text-lg line-clamp-3">No movies found</p>
+			<p class="text-lg line-clamp-3">{{ $t("searchMovies.stateNoMovies") }}</p>
 		</div>
 
 		<!-- No More Movies State -->
 		<div v-if="totalPages === page" class="flex justify-center my-8">
-			<p class="text-base line-clamp-3">No more movies</p>
+			<p class="text-base line-clamp-3">{{ $t("searchMovies.stateNoMoreMovies") }}</p>
 		</div>
 	</div>
 </template>