From a03d71fe77c4a17941a8bf6f3bfe39cfa53f9cf1 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 18 Aug 2025 15:00:55 +0200
Subject: [PATCH] created a snippet to use for detailed album view

---
 src/routes/garden/music/+page.svelte | 34 ++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/routes/garden/music/+page.svelte b/src/routes/garden/music/+page.svelte
index 8eef26b..b090d8f 100644
--- a/src/routes/garden/music/+page.svelte
+++ b/src/routes/garden/music/+page.svelte
@@ -19,6 +19,10 @@
 />
 
 <Content>
+    <div class="album-showcase">
+
+    </div>
+
     <div class="album-button-container">
         {#each albums.entries() as [key, album]}
         {@render albumButton({ key, album })}
@@ -26,6 +30,18 @@
     </div>
 </Content>
 
+{#snippet albumShowcase({
+        album,
+    }: {
+        album: AlbumEntry;
+    })}
+    <img class="album-showcase-img" alt="Album art for {album.artist} – {album.title}">
+    <h2 class="album-showcase-title">{album.artist} – {album.title}</h2>
+    {#each album.description as paragraph}
+        <p class="album-showcase-paragraph">{paragraph}</p>
+    {/each}
+{/snippet}
+
 {#snippet albumButton({
     key,
     album,
@@ -45,12 +61,30 @@
 {/snippet}
 
 <style>
+    /* album showcase */
+    .album-showcase {
+        /* display: none; */
+    }
+
+    .album-showcase-img {
+
+    }
+
+    .album-showcase-title {
+
+    }
+
+    .album-showcase-paragraph {
+
+    }
+
     .album-button-container {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
     }
 
+    /* album buttons */
     .album-button {
         width: calc(100%/12);
         line-height: 0;