blob: cbf4f0417329bf3204cf4f69957b723c10da06e1 (
plain)
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
|
<script>
import { logins, currentUser } from '$lib/store';
import Message from '$lib/components/Message.svelte';
export let sender;
export let messages;
let name;
$: name = $logins.get(sender);
$: ownMessage = $currentUser.id == sender;
</script>
<div
class="card card-hover m-4 px-4 py-1 relative"
class:own-message={ownMessage}
class:other-message={!ownMessage}>
<span class="chip variant-soft sticky top-o left-0">
@{name}:
</span>
{#each messages as { at, body }}
<Message {at} {body} />
{/each}
</div>
<style>
.own-message {
width: 80%;
margin-right: auto;
}
.other-message {
width: 80%;
margin-left: auto;
}
</style>
|
