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

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

    let input = $state("")

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

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