41 lines
1.3 KiB
Svelte
41 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { LoaderCircle } from "@lucide/svelte"
|
|
|
|
let { roomId } = $props()
|
|
let input = $state("")
|
|
let disabled: boolean = $state(false)
|
|
|
|
async function sendSong() {
|
|
disabled = true
|
|
await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
|
|
input = ""
|
|
disabled = false
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${disabled ? "disabled" : ""}`}
|
|
>
|
|
<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()
|
|
}
|
|
}}
|
|
{disabled}
|
|
/>
|
|
{#if disabled}
|
|
<span class="animate-spin">
|
|
<LoaderCircle />
|
|
</span>
|
|
{/if}
|
|
|
|
<button class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border border-0 font-semibold shadow-xl duration-100 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={sendSong}
|
|
>Add</button
|
|
>
|
|
<span class="i-lucide-chevrons-left"></span>
|
|
</div>
|