team-1/frontend/src/lib/components/SuggestionInput.svelte

<script lang="ts">
    let { roomId } = $props()

    let input = $state("")

    async function sendSong() {
        await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
        input = ""
    }
</script>

<div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600 bg-lime-500">
    <input
        type="text"
        placeholder="Song & Artist"
        class="h-[50px] w-3/4 rounded px-4 font-bold text-white outline-none"
        bind:value={input}
        onkeydown={(e) => {
            if (e.key == "Enter") {
                sendSong()
            }
        }}
    />
    <button
        class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border-2 border-lime-700 bg-lime-600 font-semibold text-white shadow-xl duration-100 hover:scale-105 active:scale-90"
        onclick={sendSong}>Add</button
    >
    <span class="i-lucide-chevrons-left"></span>
</div>