Chalarangelo/30-seconds-of-code

---
const { contentItems, largeImages = false } = Astro.props;
---

<section class='preview-list' data-large-images={largeImages ? 'true' : null}>
  <slot name='title' />
  <ul>
    {contentItems.map((contentItem) => (
      <li>
        <img
          src={contentItem.cover}
          srcset={contentItem.coverSrcset}
          alt=''
          height={largeImages ? '240' : '180'}
          width='360'
          loading='lazy'
        />
        <article>
          <small>{contentItem.tags} &middot; {contentItem.dateTime ? (
            <time datetime={contentItem.dateTime}>{contentItem.extraContext}</time>
          ) : contentItem.extraContext}</small>
          <h3>
            <a href={contentItem.url}>{contentItem.title}</a>
          </h3>
          <p set:html={`${contentItem.description}`}/>
        </article>
      </li>
    ))}
    {contentItems.length === 1 && (
      <li />
    )}
  </ul>
  <slot name='bottom-nav' />
</section>