feat: added queue slider & input field

frontend/src/lib/components/QueueSlider.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    let { songs, playing } = $props()
+
+    let displaySongs = $derived([
+        playing > 0 && playing < songs.length ? songs[playing - 1] : { name: "", image: "" },
+        songs[playing],
+        playing == songs.length - 1 ? { name: "", image: "" } : songs[playing + 1],
+    ])
+</script>
+
+<div class="relative flex w-full justify-center overflow-hidden">
+    <div class="flex w-fit flex-row gap-4">
+        {#each displaySongs as song, i}
+            {#if song.name != ""}
+                <div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10 mx-2 scale-100" : "z-0  opacity-70"}`}>
+                    <img
+                        class="h-[60vw] max-h-[250px] w-[60vw]
+                   max-w-[250px] rounded object-cover transition-all duration-300"
+                        src={song.image}
+                        alt="Song cover"
+                    />
+                    {#if i === 1}
+                        <h1 class="mt-2">{song.name}</h1>
+                    {/if}
+                </div>
+            {/if}
+        {/each}
+    </div>
+</div>

frontend/src/lib/components/SuggestionInput.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+</script>
+
+<div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-black p-4">
+    <input type="text" placeholder="Song & Artist" class="h-full w-3/4 rounded" />
+    <button class="w-1/4 rounded">Send</button>
+</div>

frontend/src/lib/components/SuggestionList.svelte

@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>

frontend/src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

frontend/src/lib/types.ts

@@ -0,0 +1,8 @@
+import * as z from "zod"
+
+export const SongSchema = z.object({
+    name: z.string(),
+    image: z.string(),
+})
+
+export type Song = z.infer<typeof SongSchema>

frontend/src/routes/+layout.svelte

@@ -4,6 +4,4 @@
     let { children } = $props()
 </script>
 
-<div class="bg-red-500 w-full h-max">
-    {@render children()}
-</div>
+{@render children()}

frontend/src/routes/+page.svelte

@@ -1,12 +1,36 @@
 <script lang="ts">
-    import { onMount } from "svelte"
+    import QueueSlider from "$lib/components/QueueSlider.svelte"
+    import SuggestionInput from "$lib/components/SuggestionInput.svelte"
 
-    let text = $state("...")
-    onMount(async () => {
-        let res = await fetch("/api")
-        text = await res.text()
-    })
+    let songs = $state([
+        {
+            name: "Prima",
+            image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
+        },
+        {
+            name: "Io e i miei banchi - Paul Ham",
+            image: "https://i.prcdn.co/img?regionKey=RbtvKb5E1Cv4j1VWm2uGrw%3D%3D",
+        },
+        {
+            name: "Terza",
+            image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
+        },
+        {
+            name: "Quarta",
+            image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
+        },
+        {
+            name: "Quinta",
+            image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
+        },
+    ])
+
+    let playing = $state(1)
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p class="text-2xl text-red-500">{text}</p>
+<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
+    <QueueSlider {songs} {playing} />
+    <div class="w-full py-6">
+        <SuggestionInput />
+    </div>
+</div>