blob: 68f44589bdb5decddef422502bd4c0518741a0ab (
plain) (
blame)
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<script>
import { Avatar, Icon } from '$comp';
export let event;
let { id, user, seen, content } = event;
let distance = (date) => {
let m = 60;
let h = 60 * m;
let d = 24 * h;
let diff = Math.round(Date.now() / 1000) - date;
return diff > d
? Math.round(diff / d) + 'd'
: diff > h
? Math.round(diff / h) + 'h'
: diff > m
? Math.round(diff / m) + 'm'
: diff > 2
? diff + 's'
: 'now';
};
let w;
</script>
<svelte:window bind:innerWidth={w} />
<div class="flex text-sm lg:text-base text-secondary hover:bg-gray-100 px-4 py-3" :key={id}>
<a href={`/${user.pubkey}`}>
<div class="mb-auto mr-2">
<div class="md:hidden">
<Avatar size={12} {user} disabled={true} />
</div>
<div class="hidden md:block">
<Avatar size={20} {user} disabled={true} />
</div>
</div>
</a>
<div class="grow" style={`max-width: ${w - 100}px`}>
<div class="w-full flex pb-1 text-black pt-1">
<div>
{user.display_name || ''}
<span class="text-secondary">@{user.username}</span>
</div>
<div class="text-secondary"> {distance(seen)}</div>
</div>
<div class="break-words text-black">
{content}
</div>
<div class="flex justify-between text-sm text-secondary pt-3">
<div class="flex group">
<Icon
icon="party"
style="mr-1 w-10 my-auto opacity-50 group-hover:opacity-100 group-hover:bg-white rounded-full p-2"
/>
<div class="my-auto group-hover:text-black">444</div>
</div>
<div class="flex group">
<Icon
icon="support"
style="mr-1 w-10 my-auto opacity-50 group-hover:opacity-100 group-hover:bg-white rounded-full p-2"
/>
<div class="my-auto group-hover:text-black">1072</div>
</div>
<div class="flex group">
<Icon
icon="smile"
style="mr-1 w-10 my-auto opacity-50 group-hover:opacity-100 group-hover:bg-white rounded-full p-2"
/>
<div class="my-auto group-hover:text-black">26</div>
</div>
<div class="flex group">
<Icon
icon="bolt"
style="mr-1 h-10 my-auto opacity-50 group-hover:opacity-100 group-hover:bg-white rounded-full p-2"
/>
<div class="my-auto group-hover:text-black">4</div>
</div>
</div>
</div>
</div>
|
