nichoth.com / grain-pwa
WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add grain-author-chip molecule

Chad Miller 068c2b49 b8be1852

+56
+56
src/components/molecules/grain-author-chip.js
··· 1 + import { LitElement, html, css } from 'lit'; 2 + import '../atoms/grain-avatar.js'; 3 + 4 + export class GrainAuthorChip extends LitElement { 5 + static properties = { 6 + avatarUrl: { type: String }, 7 + handle: { type: String }, 8 + displayName: { type: String } 9 + }; 10 + 11 + static styles = css` 12 + :host { 13 + display: flex; 14 + align-items: center; 15 + gap: var(--space-sm); 16 + } 17 + .info { 18 + display: flex; 19 + flex-direction: column; 20 + min-width: 0; 21 + } 22 + .handle { 23 + font-size: var(--font-size-sm); 24 + font-weight: var(--font-weight-semibold); 25 + color: var(--color-text-primary); 26 + white-space: nowrap; 27 + overflow: hidden; 28 + text-overflow: ellipsis; 29 + } 30 + .name { 31 + font-size: var(--font-size-xs); 32 + color: var(--color-text-secondary); 33 + white-space: nowrap; 34 + overflow: hidden; 35 + text-overflow: ellipsis; 36 + } 37 + `; 38 + 39 + render() { 40 + return html` 41 + <grain-avatar 42 + src=${this.avatarUrl || ''} 43 + alt=${this.handle || ''} 44 + size="sm" 45 + ></grain-avatar> 46 + <div class="info"> 47 + <span class="handle">${this.handle}</span> 48 + ${this.displayName ? html` 49 + <span class="name">${this.displayName}</span> 50 + ` : ''} 51 + </div> 52 + `; 53 + } 54 + } 55 + 56 + customElements.define('grain-author-chip', GrainAuthorChip);