From 15ea565601b752b0737f7084c8989101ce9d6345 Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Wed, 29 May 2024 10:49:03 -0500
Subject: [PATCH] Minimal UI for albums

---
 frontend/src/routes/Home.tsx      | 33 +++++++++++++++++++++++++++++--
 frontend/src/routes/Login.tsx     |  6 +++++-
 frontend/tailwind.config.mjs      |  7 +++++++
 frontend/wailsjs/go/main/App.d.ts |  3 +++
 frontend/wailsjs/go/main/App.js   |  4 ++++
 5 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/Home.tsx b/frontend/src/routes/Home.tsx
index 5eec554..de69adb 100644
--- a/frontend/src/routes/Home.tsx
+++ b/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>
     );
 }
diff --git a/frontend/src/routes/Login.tsx b/frontend/src/routes/Login.tsx
index 591eb45..5c54e9c 100644
--- a/frontend/src/routes/Login.tsx
+++ b/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() !== ""}>
diff --git a/frontend/tailwind.config.mjs b/frontend/tailwind.config.mjs
index 966eec8..fd1e313 100644
--- a/frontend/tailwind.config.mjs
+++ b/frontend/tailwind.config.mjs
@@ -5,6 +5,13 @@ export default {
     content: [
         "./src/**/*.{js,jsx,ts,tsx}",
     ],
+    theme: {
+        extend: {
+            spacing: {
+                "30": "7.5rem",
+            },
+        },
+    },
     plugins: [
         daisyui,
     ],
diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts
index d40aeda..9b5c20e 100755
--- a/frontend/wailsjs/go/main/App.d.ts
+++ b/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>;
 
diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js
index 749ae7f..4a96693 100755
--- a/frontend/wailsjs/go/main/App.js
+++ b/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);
 }