Files
auth.andert.me/src/lib/components/MessageInput.svelte
2023-07-21 14:16:42 +02:00

35 lines
838 B
Svelte

<script>
import { createMessage, clearMessages } from '$lib/services/messages';
let newMessageText = '';
function handleSend() {
if (newMessageText.trim() !== '') {
createMessage(newMessageText);
newMessageText = '';
}
}
function handleClear() {
clearMessages(); // Call the clearMessages function to clear all messages.
}
</script>
<footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
<input
type="text"
class="flex-grow border rounded px-3 py-2 mr-2"
placeholder="Type your message..."
bind:value={newMessageText}
/>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded" on:click={handleSend}>
Send Message
</button>
<button
class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded ml-2"
on:click={handleClear}
>
Clear
</button>
</footer>