Avatar

1import { cva } from "class-variance-authority";
2import { html, LitElement, type PropertyValues } from "lit";
3import { customElement, property, state } from "lit/decorators.js";
4import { TW } from "@/registry/lib/tailwindMixin";
5import { cn } from "@/registry/lib/utils";
6 
7export const avatarVariants = cva(
8  "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
9);
10 
11export interface AvatarProperties {
12  src?: string;
13  alt?: string;
14  loading?: "eager" | "lazy";
15}
16 
17@customElement("ui-avatar")
18export class Avatar extends TW(LitElement) implements AvatarProperties {
19  @property({ type: String }) src?: string;
20  @property({ type: String }) alt = "";
21  @property({ type: String }) loading: "eager" | "lazy" = "lazy";
22 
23  @state() private _imageLoaded = false;
24  @state() private _imageError = false;
25 
26  override updated(changedProperties: PropertyValues) {
27    super.updated(changedProperties);
28 
29    if (changedProperties.has("src")) {
30      this._imageLoaded = false;
31      this._imageError = false;
32    }
33  }
34 
35  private _handleImageLoad() {
36    this._imageLoaded = true;
37    this._imageError = false;
38  }
39 
40  private _handleImageError() {
41    this._imageLoaded = false;
42    this._imageError = true;
43  }
44 
45  private get _shouldShowImage(): boolean {
46    return Boolean(this.src && this._imageLoaded && !this._imageError);
47  }
48 
49  private get _shouldShowFallback(): boolean {
50    return !this.src || this._imageError || !this._imageLoaded;
51  }
52 
53  override render() {
54    const hasImageSlot = this.querySelector('[slot="image"]');
55 
56    return html`
57      <span class=${cn(avatarVariants(), this.className)}>
58        <slot name="image"></slot>
59 
60        ${
61          this.src && !hasImageSlot
62            ? html`
63              <img
64                class="aspect-square h-full w-full object-cover"
65                src=${this.src}
66                alt=${this.alt}
67                loading=${this.loading}
68                @load=${this._handleImageLoad}
69                @error=${this._handleImageError}
70                style=${this._shouldShowImage ? "" : "display: none;"}
71              />
72            `
73            : ""
74        }
75        ${
76          this._shouldShowFallback
77            ? html`
78              <span
79                class="flex h-full w-full items-center justify-center rounded-full bg-muted"
80              >
81                <slot></slot>
82              </span>
83            `
84            : ""
85        }
86      </span>
87    `;
88  }
89}
90 
91declare global {
92// … truncated