WIP PWA for Grain
feat: add grain-stat-count molecule
+65
+65
src/components/molecules/grain-stat-count.js
+65
src/components/molecules/grain-stat-count.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
import '../atoms/grain-icon.js';
3
+
4
+
export class GrainStatCount extends LitElement {
5
+
static properties = {
6
+
icon: { type: String },
7
+
count: { type: Number }
8
+
};
9
+
10
+
static styles = css`
11
+
:host {
12
+
display: inline-flex;
13
+
align-items: center;
14
+
gap: var(--space-xs);
15
+
color: var(--color-text-primary);
16
+
}
17
+
button {
18
+
display: flex;
19
+
align-items: center;
20
+
justify-content: center;
21
+
background: none;
22
+
border: none;
23
+
padding: var(--space-sm);
24
+
margin: calc(-1 * var(--space-sm));
25
+
cursor: pointer;
26
+
color: inherit;
27
+
border-radius: var(--border-radius);
28
+
transition: opacity 0.2s;
29
+
}
30
+
button:hover {
31
+
opacity: 0.7;
32
+
}
33
+
button:active {
34
+
transform: scale(0.95);
35
+
}
36
+
.count {
37
+
font-size: var(--font-size-sm);
38
+
font-weight: var(--font-weight-semibold);
39
+
}
40
+
`;
41
+
42
+
constructor() {
43
+
super();
44
+
this.count = 0;
45
+
}
46
+
47
+
#formatCount(n) {
48
+
if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
49
+
if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
50
+
return n.toString();
51
+
}
52
+
53
+
render() {
54
+
return html`
55
+
<button type="button" aria-label=${this.icon}>
56
+
<grain-icon name=${this.icon} size="24"></grain-icon>
57
+
</button>
58
+
${this.count > 0 ? html`
59
+
<span class="count">${this.#formatCount(this.count)}</span>
60
+
` : ''}
61
+
`;
62
+
}
63
+
}
64
+
65
+
customElements.define('grain-stat-count', GrainStatCount);