Spaces:
Sleeping
Sleeping
File size: 2,026 Bytes
b8dc493 | 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 | <script>
import { createEventDispatcher, onMount } from "svelte";
import { generationStates, generationStore } from "./generation.store";
/** @type {HTMLDialogElement | undefined}*/
let modal;
const dispatch = createEventDispatcher();
onMount(() => {
modal.showModal();
modal.addEventListener("close", onClose);
return () => modal.removeEventListener("close", onClose);
});
function onClose() {
dispatch("close");
}
</script>
<dialog
bind:this={modal}
class="inset-0 w-full md:w-1/2 h-1/2 p-4 rounded-lg border border-indigo-200 shadow-lg relative"
>
<form class="flex flex-col justify-between h-full" method="dialog">
<div class="flex flex-col">
<h1 class="text-2xl">Create new internal ticket</h1>
<div>
<label class="block pl-2"
>Title <br />
<input type="text" class="border w-full text-lg px-2" value={$generationStore.data.title} /></label
>
</div>
<div class="mt-8">
<label class="block pl-2"
>Body <br />
<textarea class="border rounded-sm w-full h-64 p-2" value={$generationStore.data.text} /></label
>
</div>
</div>
<button type="submit" class="bg-indigo-500 text-white rounded-lg px-4 py-2">Submit</button>
</form>
{#if $generationStore.state === generationStates.LOADING}
<div class="absolute inset-0 bg-indigo-100 bg-opacity-90 flex justify-center items-center">
Generating title and question body...
</div>
{/if}
<div class="absolute top-0 right-2 text-gray-300 hover:text-gray-900">
<button class="text-2xl" on:click={onClose}>×</button>
</div>
</dialog>
<style>
dialog::backdrop {
@apply bg-gradient-to-t from-white to-indigo-500;
opacity: 0.75;
}
</style>
|