Spaces:
Runtime error
Runtime error
File size: 1,518 Bytes
a6e7e8f 7c37442 a6e7e8f 7d4e291 7c37442 a6e7e8f 7c37442 a6e7e8f 7d4e291 a6e7e8f 7d4e291 a6e7e8f 35946a9 7d4e291 a6e7e8f 7d4e291 a6e7e8f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { useMyPresence } from '$lib/liveblocks';
const dispatch = createEventDispatcher();
let prompt: string;
let inputEl: HTMLInputElement;
const myPresence = useMyPresence();
$: {
myPresence.update({
currentPrompt: prompt,
isPrompting: true
});
}
const onKeyup = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
dispatch('close');
myPresence.update({
currentPrompt: '',
isPrompting: false
});
}
};
onMount(() => {
inputEl.focus();
window.addEventListener('keyup', onKeyup);
return () => {
window.removeEventListener('keyup', onKeyup);
};
});
function onPrompt() {
if (prompt.trim() !== '') {
dispatch('prompt', prompt);
}
}
</script>
<form
class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80 px-3"
on:submit|preventDefault={onPrompt}
on:click={() => dispatch('close')}
>
<input
bind:this={inputEl}
bind:value={prompt}
on:click|stopPropagation
class="input"
placeholder="Type a prompt..."
title="Input prompt to generate image and obtain palette"
type="text"
name="prompt"
/>
</form>
<style lang="postcss" scoped>
.input {
@apply w-full max-w-sm text-sm disabled:opacity-50 italic placeholder:text-white text-white placeholder:text-opacity-50 bg-slate-900 border-2 border-white rounded-2xl px-2 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1;
}
</style>
|