pages/src/routes/garden/music/+page.svelte

<script lang="ts">
    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
    import Content from "$lib/content.svelte";
    import { albums, type AlbumEntry } from "$lib/likedalbums";

    let prnt = function(key: string) {
        console.log(key)
    }
</script>

<svelte:head>
    <title>My Liked Music | denizk0461</title>
</svelte:head>

<BannerTitleAlt
    title="My Liked Music"
    banner="/projects/banner.webp"
    subtitle="A look into my music taste"
/>

<Content>
    <div class="album-showcase">

    </div>

    <div class="album-button-container">
        {#each albums.entries() as [key, album]}
        {@render albumButton({ key, album })}
        {/each}
    </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,
}: {
    key: string;
    album: AlbumEntry;
})}
    <div class="album-button">
        <input
            class="album-button-img"
            type="image"
            src="{album.img}"
            alt="Album art for {album.artist} – {album.title}"
            on:click={() => prnt(key)}
        />
    </div>
{/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;
        transition: 0.06s ease-in-out scale, 0.1s ease-in-out filter;
        scale: 1.0;
        z-index: 1;
        filter: saturate(0.2) brightness(0.7);
    }
    .album-button:hover {
        scale: 1.25;
        z-index: 20;
        filter: saturate(1.0) brightness(1.0);
    }

    .album-button-img {
        width: 100%;
        padding: 2px;
        box-sizing: border-box;
    }
</style>