diff --git a/movie-group-8/src/components/MovieCard.vue b/movie-group-8/src/components/MovieCard.vue index a68aef804c0099383b7f77c9b9089953f66c176e..15e6322b2e79283be5c16313a8484ba56dd24151 100644 --- a/movie-group-8/src/components/MovieCard.vue +++ b/movie-group-8/src/components/MovieCard.vue @@ -1,15 +1,30 @@ <template> <div class="bg-white dark:bg-neutral-800 border dark:border-neutral-700 rounded-lg p-4 flex gap-4 items-start"> - <img - v-if="movie.poster_path" - :src="'https://image.tmdb.org/t/p/w154' + movie.poster_path" - alt="Poster" - class="w-24 h-36 object-cover rounded" - /> + <!-- Clickable poster --> + <router-link + :to="`/films/${movie.id}`" + class="shrink-0 hover:opacity-90 transition" + > + <img + v-if="movie.poster_path" + :src="'https://image.tmdb.org/t/p/w154' + movie.poster_path" + alt="Poster" + class="w-24 h-36 object-cover rounded" + /> + </router-link> + <div class="flex-1"> - <p class="text-lg font-semibold text-gray-800 dark:text-white">{{ movie.title }}</p> + <!-- Clickable title --> + <router-link + :to="`/films/${movie.id}`" + class="text-lg font-semibold text-gray-800 dark:text-white hover:underline block" + > + {{ movie.title }} + </router-link> + <p class="text-sm text-gray-600 dark:text-neutral-400">â {{ movie.vote_average }}</p> + <!-- Interactive status dropdown --> <label class="text-xs text-gray-500 dark:text-gray-400 block mt-2"> Status: <select