WIP PWA for Grain
feat: add grain-engagement-bar organism
+39
+39
src/components/organisms/grain-engagement-bar.js
+39
src/components/organisms/grain-engagement-bar.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
import '../molecules/grain-stat-count.js';
3
+
4
+
export class GrainEngagementBar extends LitElement {
5
+
static properties = {
6
+
favoriteCount: { type: Number },
7
+
commentCount: { type: Number }
8
+
};
9
+
10
+
static styles = css`
11
+
:host {
12
+
display: flex;
13
+
align-items: center;
14
+
gap: var(--space-md);
15
+
padding: var(--space-xs) var(--space-md);
16
+
}
17
+
`;
18
+
19
+
constructor() {
20
+
super();
21
+
this.favoriteCount = 0;
22
+
this.commentCount = 0;
23
+
}
24
+
25
+
render() {
26
+
return html`
27
+
<grain-stat-count
28
+
icon="heart"
29
+
count=${this.favoriteCount}
30
+
></grain-stat-count>
31
+
<grain-stat-count
32
+
icon="comment"
33
+
count=${this.commentCount}
34
+
></grain-stat-count>
35
+
`;
36
+
}
37
+
}
38
+
39
+
customElements.define('grain-engagement-bar', GrainEngagementBar);