refactor: amélioration de la structure du composant MangaCard avec des ajustements de style et de mise en page, y compris l'utilisation de thumbnailUrl et l'optimisation des classes CSS

assets/vue/app/domain/manga/presentation/components/MangaCard.vue

@@ -1,52 +1,48 @@
 <template>
     <div
         class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
-    @click="navigateToDetails"
-  >
+        @click="navigateToDetails">
         <div class="relative pb-[150%]">
             <img
-        :src="manga.imageUrl || 'https://via.placeholder.com/300x400'"
+                :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
                 :alt="manga.title"
-        class="absolute inset-0 w-full h-full object-contain bg-gray-100"
-      />
+                class="absolute inset-0 w-full h-full object-cover bg-gray-100" />
         </div>
         <div class="p-2">
             <h3 class="text-lg font-semibold text-gray-800 mb-1">{{ manga.title }}</h3>
             <div class="flex items-center">
                 <span class="text-sm text-gray-500">{{ manga.publicationYear }}</span>
             </div>
-      <div class="mt-1 text-sm text-gray-500">
-        Added: {{ formatDate(manga.createdAt) }}
-      </div>
+            <div class="mt-1 text-sm text-gray-500"> Added: {{ formatDate(manga.createdAt) }} </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
+    import { useRouter } from 'vue-router';
 
-const router = useRouter();
+    const router = useRouter();
 
-const props = defineProps({
+    const props = defineProps({
         manga: {
             type: Object,
             required: true
         }
-});
+    });
 
-const navigateToDetails = () => {
+    const navigateToDetails = () => {
         router.push({
             name: 'manga-details',
             params: { id: props.manga.id }
         });
-};
+    };
 
-const formatDate = (dateString) => {
+    const formatDate = dateString => {
         const date = new Date(dateString);
         return date.toLocaleDateString('en-US', {
             month: 'short',
             day: 'numeric',
             year: 'numeric'
         });
-};
+    };
 </script>