hy-general-list-item.tsx

import {Component, Element, h, Prop} from '@stencil/core';

@Component({
  tag: 'hy-general-list-item',
  styleUrl: 'hy-general-list-item.scss',
  shadow: true,
})
export class HyGeneralListItem {
  @Prop() description?: string;
  @Prop() imageAlt: string = '';
  @Prop() imageUrl: string = null;
  @Prop() disableLazy: boolean = false;
  @Prop() itemTitle?: string;
  @Prop() label?: string;
  @Prop() type?: string;
  @Prop() url?: string;

  @Element() el: HTMLElement;

  render() {
    const classAttributes = ['hy-general-list-item'].join(' ');
    const contentClassAttributes = ['hy-general-list-item__text-container'].join(' ');
    const imageClassAttributes = ['hy-general-list-item__image-container'].join(' ');

    const aspectRatioWidth = 16;
    const aspectRatioHeight = 10;
    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
    const aspectRatio = {
      '--aspectRatio': `${aspect}%` as 'aspectRatio',
    };

    return (
      <article class={classAttributes}>
        <a class="hy-general-list-item__link" href={this.url} target="_blank">
          <div class="hy-general-list-item__type">
            <span>{this.label}</span>
          </div>
          <figure class={imageClassAttributes} style={aspectRatio}>
            <img
              loading={this.disableLazy ? 'eager' : 'lazy'}
              alt={this.imageAlt}
              class="hy-general-list-item__image"
              src={this.imageUrl}
            />
          </figure>
          <div class={contentClassAttributes}>
            <h3 class="hy-general-list-item__title">{this.itemTitle}</h3>
            <p class="hy-general-list-item__description">{this.description}</p>
          </div>
        </a>
      </article>
    );
  }
}