grain-pwa / src / components / molecules / grain-gallery-thumbnail.js

import { LitElement, html, css } from 'lit';
import { router } from '../../router.js';

export class GrainGalleryThumbnail extends LitElement {
  static properties = {
    handle: { type: String },
    rkey: { type: String },
    imageUrl: { type: String },
    alt: { type: String }
  };

  static styles = css`
    :host {
      display: block;
    }
    a {
      display: block;
      aspect-ratio: 3 / 4;
      background: var(--color-bg-elevated);
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  `;

  #handleClick(e) {
    e.preventDefault();
    router.push(`/profile/${this.handle}/gallery/${this.rkey}`);
  }

  render() {
    return html`
      <a
        href="/profile/${this.handle}/gallery/${this.rkey}"
        @click=${this.#handleClick}
      >
        <img
          src=${this.imageUrl || ''}
          alt=${this.alt || ''}
          decoding="async"
          style="view-transition-name: gallery-hero-${this.rkey};"
        >
      </a>
    `;
  }
}

customElements.define('grain-gallery-thumbnail', GrainGalleryThumbnail);