From a172e224c161fd318b412ae5bbf3a90dcc307c30 Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Mon, 31 Mar 2025 16:12:22 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20am=C3=A9lioration=20de=20la=20struc?=
 =?UTF-8?q?ture=20du=20composant=20MangaCard=20avec=20des=20ajustements=20?=
 =?UTF-8?q?de=20style=20et=20de=20mise=20en=20page,=20y=20compris=20l'util?=
 =?UTF-8?q?isation=20de=20thumbnailUrl=20et=20l'optimisation=20des=20class?=
 =?UTF-8?q?es=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../presentation/components/MangaCard.vue     | 82 +++++++++----------
 1 file changed, 39 insertions(+), 43 deletions(-)

diff --git a/assets/vue/app/domain/manga/presentation/components/MangaCard.vue b/assets/vue/app/domain/manga/presentation/components/MangaCard.vue
index 143fd9f..a762124 100644
--- a/assets/vue/app/domain/manga/presentation/components/MangaCard.vue
+++ b/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"
-  >
-    <div class="relative pb-[150%]">
-      <img
-        :src="manga.imageUrl || 'https://via.placeholder.com/300x400'"
-        :alt="manga.title"
-        class="absolute inset-0 w-full h-full object-contain bg-gray-100"
-      />
+    <div
+        class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
+        @click="navigateToDetails">
+        <div class="relative pb-[150%]">
+            <img
+                :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
+                :alt="manga.title"
+                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>
     </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>
-  </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
+    import { useRouter } from 'vue-router';
 
-const router = useRouter();
+    const router = useRouter();
 
-const props = defineProps({
-  manga: {
-    type: Object,
-    required: true
-  }
-});
+    const props = defineProps({
+        manga: {
+            type: Object,
+            required: true
+        }
+    });
 
-const navigateToDetails = () => {
-  router.push({
-    name: 'manga-details',
-    params: { id: props.manga.id }
-  });
-};
+    const navigateToDetails = () => {
+        router.push({
+            name: 'manga-details',
+            params: { id: props.manga.id }
+        });
+    };
 
-const formatDate = (dateString) => {
-  const date = new Date(dateString);
-  return date.toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric'
-  });
-};
-</script> 
\ No newline at end of file
+    const formatDate = dateString => {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        });
+    };
+</script>