Minimal UI for albums

frontend/src/routes/Home.tsx

@@ -1,15 +1,44 @@
-import { createSignal, onMount } from "solid-js";
+import { For, createResource, createSignal, onMount } from "solid-js";
+import { GetRandomAlbums } from "../../wailsjs/go/main/App";
+import {main} from "../../wailsjs/go/models";
 
 export function Home() {
     const [hidden, setHidden] = createSignal(true);
+    const [albums] = createResource(GetRandomAlbums);
 
     onMount(() => {
+        // Fade in the UI
         setTimeout(() => setHidden(false) , 150);
     });
 
+
     return (
         <div class={`min-h-screen ${hidden() ? "opacity-0" : "opacity-100"} transition-opacity`}>
-            Home :D
+            <div class="py-10 h-64 overflow-scroll whitespace-nowrap">
+                <For each={albums()}>
+                    {(album) => <Album album={album} />}
+                </For>
+            </div>
+        </div>
+    );
+}
+
+function Album(props: {album: main.Album}) {
+    return (
+        <div class="inline-block mx-2 p-1 w-32 rounded bg-zinc-900">
+            <img
+                class="inline-block rounded w-30 h-30 min-w-30 min-h-30"
+                src={props.album.mediumImageUrl}
+                alt=""
+            />
+            <br />
+            <div class="text-sm overflow-hidden overflow-ellipsis pt-1">
+                {props.album.name}
+            </div>
+            <div class="text-xs overflow-hidden overflow-ellipsis opacity-50">
+                {props.album.albumArtist}
+            </div>
+
         </div>
     );
 }

frontend/src/routes/Login.tsx

@@ -72,7 +72,11 @@ export function Login() {
                     </label>
                     <br />
                     <div class="text-center">
-                        <button type="submit" class="btn btn-primary">Login</button>
+                        <button type="submit" class={`btn btn-primary ${loading() ? "animate-pulse" : ""}`}
+                            disabled={loading()}
+                        >
+                            Login
+                        </button>
                     </div>
 
                     <Show when={error() !== ""}>

frontend/tailwind.config.mjs

@@ -5,6 +5,13 @@ export default {
     content: [
         "./src/**/*.{js,jsx,ts,tsx}",
     ],
+    theme: {
+        extend: {
+            spacing: {
+                "30": "7.5rem",
+            },
+        },
+    },
     plugins: [
         daisyui,
     ],

frontend/wailsjs/go/main/App.d.ts

@@ -1,5 +1,8 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
+import {main} from '../models';
+
+export function GetRandomAlbums():Promise<Array<main.Album>>;
 
 export function Greet(arg1:string):Promise<string>;
 

frontend/wailsjs/go/main/App.js

@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function GetRandomAlbums() {
+  return window['go']['main']['App']['GetRandomAlbums']();
+}
+
 export function Greet(arg1) {
   return window['go']['main']['App']['Greet'](arg1);
 }