projet

components/favorites.riot

@@ -1,33 +1,79 @@
 <favorites>
     <h2>Mes favoris</h2>
-    <ul>
-        <li each={item in state.favorites}>{item.title}</li>
-    </ul>
+
+    <div if={state.favorites.items.length> 0}>
+        <div class="results-grid">
+            <div class="card" each={item in state.favorites.items}>
+                <a href={ "#/release-details/" + item.id}>
+                    <img src={item.thumb} alt="cover" />
+                    <h4>{item.title}</h4>
+                    <div if={item.type !=='artist' }>
+                        <p>{item.year}</p>
+                        <footer>
+                            {item.community?.want} <i class="fa-solid fa-check"></i> {item.community?.have} <i class="fa-regular fa-heart"></i>
+                        </footer>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <p if={state.favorites.items.length===0 }>Aucun favori trouvé.</p>
+
     <script>
         export default {
             state: {
-                favorites: []
+                favorites: {
+                    items: []
+                }
             },
             async onMounted() {
-                const favoris = await window.getFavorites();
-            },
+                const ids = await window.getFavorites();
 
+                const items = [];
+                for (const id of ids) {
+                    const release = await window.getReleaseDetails(id);
+                    items.push(release);
+                }
+
+                this.state.favorites.items = items;
+                this.update();
+            }
         }
     </script>
+
     <style>
-        ul {
-            list-style: none;
-            padding: 0;
-            max-width: 600px;
-            margin: auto;
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 15px;
         }
         
-        ul li {
-            background: white;
-            margin: 0.5rem;
-            padding: 0.75rem;
+        .card {
+            border: 1px solid #ccc;
+            padding: 10px;
+            text-align: center;
+            background: #fff;
+            border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            border-radius: 5px;
+        }
+        
+        .card img {
+            width: 100%;
+            height: auto;
+            border-radius: 4px;
+            margin-bottom: 10px;
+        }
+        
+        .card h4 {
+            font-size: 1rem;
+            margin: 5px 0;
+        }
+        
+        footer {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 0.5rem;
         }
     </style>
 </favorites>