From bdda8fcbfada26786a19e1dd8dabf8cc6f4397ce Mon Sep 17 00:00:00 2001
From: Nunu Miah <nm01312@surrey.ac.uk>
Date: Thu, 22 May 2025 17:39:57 +0100
Subject: [PATCH] Movie Cards for watchlist directs to movie details when
clicked
---
movie-group-8/src/components/MovieCard.vue | 29 ++++++++++++++++------
1 file changed, 22 insertions(+), 7 deletions(-)
diff --git a/movie-group-8/src/components/MovieCard.vue b/movie-group-8/src/components/MovieCard.vue
index a68aef8..15e6322 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
--
GitLab