tildefriends/apps/ssb/tf-user.js

import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js';

class TfUserElement extends LitElement {
	static get properties() {
		return {
			id: {type: String},
			users: {type: Object},
		};
	}

	static styles = styles;

	constructor() {
		super();
		this.id = null;
		this.users = {};
	}

	render() {
		let name = this.users?.[this.id]?.name;
		name =
			name !== undefined
				? html`<a target="_top" href=${'#' + this.id}>${name}</a>`
				: html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;

		if (this.users[this.id]) {
			let image = this.users[this.id].image;
			image = typeof image == 'string' ? image : image?.link;
			return html` <div style="display: inline-block; font-weight: bold">
				<img
					style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%"
					?hidden=${image === undefined}
					src="${image ? '/' + image + '/view' : undefined}"
				/>
				${name}
			</div>`;
		} else {
			return html` <div style="display: inline-block; font-weight: bold">
				${name}
			</div>`;
		}
	}
}

customElements.define('tf-user', TfUserElement);