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>