Repository navigation
Expand file tree
/
Copy pathApp.svelte
More file actions
59 lines (54 loc) · 1.74 KB
/
Copy pathApp.svelte
File metadata and controls
59 lines (54 loc) · 1.74 KB
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 lang="ts">
import type { Message } from '../../server/src/app'
import { client } from './feathers'
let text = $state('')
let messages = $state(await client.service('messages').find())
client.service('messages').on('created', (message: Message) => {
messages.push(message)
})
await client.setup()
function createMessage(event: Event) {
event.preventDefault()
client.service('messages').create({
text,
})
text = ''
}
</script>
<main>
<div class="drawer drawer-mobile">
<input id="drawer-left" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col">
<div id="chat" class="h-full overflow-y-auto px-3">
{#each messages as message (message.id)}
<div class={`chat py-2 chat-start`}>
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://github.com/feathersdev.png" />
</div>
</div>
<div class="chat-header pb-1">
<time class="text-xs opacity-50">{new Date(message.createdAt).toLocaleString()}</time>
</div>
<div class="chat-bubble">
{message.text}
</div>
</div>
{/each}
<div id="message-end" />
</div>
<div class="form-control w-full py-2 px-3">
<form class="input-group overflow-hidden" id="send-message" on:submit={createMessage}>
<input
name="text"
type="text"
placeholder="Compose message"
class="input input-bordered w-full"
bind:value={text}
/>
<button type="submit" class="btn">Send</button>
</form>
</div>
</div>
</div>
</main>