bujo et modification de texte

src/components/bujo/CollectionFilms.astro

@@ -0,0 +1,38 @@
+---
+// Example data.
+const items = [
+    { title: "Demon Slayer : La forteresse infinie", type: "Film", status: "Vu" },
+];
+
+const itemsByStatus = {
+    'En cours': items.filter(b => b.status === 'En cours'),
+    'À voir': items.filter(b => b.status === 'À voir'),
+    'Vu': items.filter(b => b.status === 'Vu'),
+};
+
+const statusStyles = {
+    'En cours': 'bg-blue-100 text-blue-800',
+    'À voir': 'bg-yellow-100 text-yellow-800',
+    'Vu': 'bg-green-100 text-green-800',
+};
+---
+
+<h1 class="text-3xl font-bold mb-2">Collection : Films & Séries à voir</h1>
+<p class="text-slate-500 mb-8">Pour ne jamais être à court d'idées lors d'une soirée cinéma.</p>
+
+{Object.entries(itemsByStatus).map(([status, itemList]) => (
+    <section class="mb-8">
+        <h2 class="text-xl font-bold text-slate-700 border-b pb-2 mb-4">{status}</h2>
+        <ul class="space-y-3">
+            {itemList.map(item => (
+                <li class="p-4 bg-white rounded-md shadow-sm border border-slate-200 flex justify-between items-center">
+                    <div>
+                        <p class="font-semibold">{item.title}</p>
+                        <p class="text-sm text-slate-500">{item.type}</p>
+                    </div>
+                    <span class={`text-xs font-semibold px-2 py-1 rounded-full ${statusStyles[status]}`}>{item.status}</span>
+                </li>
+            ))}
+        </ul>
+    </section>
+))}