- début refonte graphique

- début MangaDbProvider

templates/manga/index.html.twig

@@ -1,19 +1,20 @@
 {% extends 'base.html.twig' %}
-
-{% block title %}Liste des mangas{% endblock %}
-
 {% block body %}
-    <h1>Liste des mangas</h1>
-
-    <ul>
+    <div class="container w-full ml-60 p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4">
         {% for manga in mangas %}
-            <li>
+            <div class="bg-white overflow-hidden border-gray-300 hover:shadow-2xl hover:border transition-shadow duration-300">
                 <a href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">
-                    {{ manga.title }}
+                    <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}" class="w-full">
+{#                    <img src="https://placehold.co/150x220" alt="{{ manga.title }}" class="w-full">#}
                 </a>
-            </li>
+                <div class="p-4">
+                    <p class="text-lg font-semibold">{{ manga.title }}</p>
+                    <p class="text-gray-600">Auteur</p>
+                    <p class="text-gray-500">Ajouter: Jun 2 2024</p>
+                </div>
+            </div>
         {% else %}
-            <li>Aucun manga trouvé.</li>
+            <p class="col-span-full text-center text-gray-500">Aucun manga trouvé.</p>
         {% endfor %}
-    </ul>
+    </div>
 {% endblock %}