WIP PWA for Grain
feat: add grain-avatar atom component
+49
+49
src/components/atoms/grain-avatar.js
+49
src/components/atoms/grain-avatar.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
3
+
export class GrainAvatar extends LitElement {
4
+
static properties = {
5
+
src: { type: String },
6
+
alt: { type: String },
7
+
size: { type: String }
8
+
};
9
+
10
+
static styles = css`
11
+
:host {
12
+
display: block;
13
+
flex-shrink: 0;
14
+
}
15
+
img {
16
+
display: block;
17
+
border-radius: 50%;
18
+
object-fit: cover;
19
+
background: var(--color-bg-elevated);
20
+
}
21
+
.sm {
22
+
width: var(--avatar-size-sm);
23
+
height: var(--avatar-size-sm);
24
+
}
25
+
.md {
26
+
width: var(--avatar-size-md);
27
+
height: var(--avatar-size-md);
28
+
}
29
+
`;
30
+
31
+
constructor() {
32
+
super();
33
+
this.size = 'sm';
34
+
this.alt = '';
35
+
}
36
+
37
+
render() {
38
+
return html`
39
+
<img
40
+
class=${this.size}
41
+
src=${this.src || ''}
42
+
alt=${this.alt}
43
+
loading="lazy"
44
+
>
45
+
`;
46
+
}
47
+
}
48
+
49
+
customElements.define('grain-avatar', GrainAvatar);