examples/hackernews/src/components/Comment.astro


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

---
import type { IComment } from '../types.js';
import For from './For.astro';
import Show from './Show.astro';
import Toggle from './Toggle.astro';

interface Props {
	comment: IComment;
}

const { comment } = Astro.props;
---

<li>
	<div class="by">
		<a href={`/users/${comment.user}`}>{comment.user}</a>{' '}
		{comment.time_ago}
	</div>
	<div class="text" set:html={comment.content} />
	<Show when={comment.comments.length}>
		<Toggle open>
			<For each={comment.comments}>{(comment: IComment) => <Astro.self comment={comment} />}</For>
		</Toggle>
	</Show>
</li>

<style>
	li {
		border-top: 1px solid #eee;
		position: relative;
	}

	.by,
	.text {
		font-size: 0.9em;
		margin: 1em 0;
	}

	.by {
		color: rgb(51 65 85);
	}

	.by a {
		color: rgb(51 65 85);
		text-decoration: underline;
	}

	.text {
		overflow-wrap: break-word;
	}

	.text :global(a:hover) {
		color: #335d92;
	}

	.text :global(pre) {
		white-space: pre-wrap;
	}
</style>