70 lines
2 KiB
TypeScript
70 lines
2 KiB
TypeScript
import { html, css, LitElement } from 'lit';
|
|
import { property, customElement, state } from 'lit/decorators.js';
|
|
import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
|
|
import { getUserProfile } from '../ndk';
|
|
import '@components/profiles/ShortProfile';
|
|
import '@components/profiles/MediumProfile';
|
|
import '@components/profiles/LargeProfile';
|
|
import '@components/profiles/CardProfile';
|
|
|
|
@customElement('arx-nostr-profile')
|
|
export class NostrProfile extends LitElement {
|
|
@property() npub = '';
|
|
|
|
@property({ reflect: true }) renderType:
|
|
| 'short'
|
|
| 'medium'
|
|
| 'large'
|
|
| 'card' = 'short';
|
|
|
|
@state()
|
|
private profile: NDKUserProfile | undefined = undefined;
|
|
|
|
@state()
|
|
private error: string | null = null;
|
|
|
|
static override styles = [
|
|
css`
|
|
.nostr-profile {
|
|
display: inline-block;
|
|
}
|
|
`,
|
|
];
|
|
|
|
override async connectedCallback() {
|
|
super.connectedCallback();
|
|
await this.loadProfile();
|
|
}
|
|
|
|
async loadProfile() {
|
|
try {
|
|
this.profile = await getUserProfile(this.npub);
|
|
} catch (error) {
|
|
this.error = 'Failed to load profile';
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
override render() {
|
|
if (this.error) {
|
|
return html`<arx-error-view .error=${this.error}></arx-error-view>`;
|
|
}
|
|
|
|
if (!this.profile) {
|
|
return html`<arx-loading-view></arx-loading-view>`;
|
|
}
|
|
|
|
switch (this.renderType) {
|
|
case 'short':
|
|
return html`<arx-nostr-short-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-short-profile>`;
|
|
case 'medium':
|
|
return html`<arx-nostr-medium-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-medium-profile>`;
|
|
case 'large':
|
|
return html`<arx-nostr-large-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-large-profile>`;
|
|
case 'card':
|
|
return html`<arx-nostr-card-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-card-profile>`;
|
|
default:
|
|
return html`<p>Invalid render type</p>`;
|
|
}
|
|
}
|
|
}
|