blob: 10755e6a455b105bb897637529ea51d91e0047aa (
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
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
85
86
87
88
89
|
import ColorHash from 'color-hash';
import { formatRelative } from 'date-fns';
import * as dom from './dom';
dom.css`
body {
background: #1e1e1e;
font-family: sans-serif;
}
`;
const now = new Date();
const Time = ({ time }) => {
const dt = new Date(time);
return formatRelative(dt, now);
};
dom.css`
.flex-space {
flex: 1;
}
`;
const Space = () => <div class="flex-space" />;
dom.css`
section {
position: absolute;
overflow: hidden;
width: 350px;
background: #363636;
border-radius: 0.4em;
}
section > header {
display: flex;
flex-direction: row;
height: 2.5em;
line-height: 2.5em;
color: #121212;
}
section > header > * {
margin: 0 0.5em;
}
section > header > img {
height: 2em;
width: 2em;
margin: 0.25em;
border-radius: 0.2em;
}
section > header > .time {
font-size: 0.8em;
color: #363636;
}
section > main {
padding: 1em;
color: #eeeeee;
font-family: serif;
}
`;
const colors = new ColorHash({ lightness: 0.8 });
export const Note = ({ id, attributedTo, published, content }) => {
const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
const username = attributedTo.name || attributedTo.preferredUsername;
return (
<section dataset={{ id }}>
<header style={{ backgroundColor }}>
<img src={attributedTo.icon.url} />
<span class="user">{username}</span>
<Space />
<span class="time"><Time time={published} /></span>
</header>
<main>
{content}
</main>
</section>
);
};
|
