nichoth.com
forked from
grain.social/grain-pwa
WIP PWA for Grain
chadtmiller.com
1import { LitElement, html, css } from 'lit';
2import '../molecules/grain-comment.js';
3
4export class GrainCommentList extends LitElement {
5 static properties = {
6 comments: { type: Array },
7 totalCount: { type: Number }
8 };
9
10 static styles = css`
11 :host {
12 display: block;
13 padding: var(--space-sm);
14 }
15 .header {
16 font-size: var(--font-size-sm);
17 color: var(--color-text-secondary);
18 margin-bottom: var(--space-sm);
19 }
20 .no-comments {
21 font-size: var(--font-size-sm);
22 color: var(--color-text-secondary);
23 font-style: italic;
24 }
25 `;
26
27 constructor() {
28 super();
29 this.comments = [];
30 this.totalCount = 0;
31 }
32
33 render() {
34 if (this.totalCount === 0) {
35 return html`<p class="no-comments">No comments yet</p>`;
36 }
37
38 return html`
39 ${this.totalCount > this.comments.length ? html`
40 <div class="header">View all ${this.totalCount} comments</div>
41 ` : ''}
42
43 ${this.comments.map(comment => html`
44 <grain-comment
45 uri=${comment.uri}
46 handle=${comment.handle}
47 displayName=${comment.displayName}
48 avatarUrl=${comment.avatarUrl}
49 text=${comment.text}
50 createdAt=${comment.createdAt}
51 focusImageUrl=${comment.focusImageUrl || ''}
52 focusImageAlt=${comment.focusImageAlt || ''}
53 ></grain-comment>
54 `)}
55 `;
56 }
57}
58
59customElements.define('grain-comment-list', GrainCommentList);