projet

components/release-details.riot

@@ -0,0 +1,68 @@
+<release-details>
+    <div class="details">
+        <h2>{state.release.title}</h2>
+        <p if="{state.release.type !== 'artist'}">-{state.release.year}</p>
+
+        <div class="release-content">
+            <img src="{state.release.thumb}" alt="{state.release.title}" />
+            <div if="{state.release.type !== 'artist'}">
+                <b>Track list</b>
+                <ul>
+                    <li each="{track in state.release.tracklist}">
+                        {track.position} - {track.title} - {track.duration}
+                    </li>
+                </ul>
+
+                <div class="genres">
+                    <span each="{genre in state.release.genres}">{genre}</span>
+                </div>
+            </div>
+            <div if="{state.release.type === 'artist'}">
+                {state.release.profile}
+            </div>
+        </div>
+    </div>
+
+    <script>
+        export default {
+            props: ["releaseid"],
+
+            state: {
+                release: [],
+            },
+
+            async onMounted() {
+                const id = this.props.releaseid
+                this.state.release = await window.getReleaseDetails(id)
+                console.log("resultat", this.state.release)
+
+                this.update()
+            }
+        }
+    </script>
+
+    <style>
+        .release-content {
+            display: flex;
+            gap: 20px;
+        }
+        
+        ul {
+            padding-left: 20px;
+        }
+        
+        li {
+            margin-bottom: 5px;
+        }
+        
+        .genres span {
+            display: inline-block;
+            background: #333;
+            color: #fff;
+            padding: 3px 7px;
+            border-radius: 3px;
+            margin-right: 5px;
+            font-size: 0.9em;
+        }
+    </style>
+</release-details>