GalleryItem

Props

Source apps/www/src/sections/GalleryItem.astro @ gitt.one

---
/**
 * GalleryItem — one item of <Gallery>: a picture with a caption and an
 *   optional line of text; the whole item links to `href` when given. Without
 *   a picture it renders as a file row (paper clip, name, download link).
 *
 * Parent: <Gallery> only. No children.
 * Picture: `image` (file name in images/). By default the picture sits in a
 *   fixed-height box and is shown whole, so a row of icons, logos or product
 *   shots lines up; set photo={true} for photographs, which then keep their
 *   own proportions and are never cropped to a letterbox.
 */
import { Image } from 'astro:assets';
import PaperClip from 'astro-heroicons/outline/PaperClip.astro';
import { resolveImage } from '../lib/images';

interface Props {
  /** the caption under the picture, or the file name of a file row */
  title: string;
  /** file name in images/; omit for a file row */
  image?: string;
  /** a line of text under the caption */
  description?: string;
  /** link of the whole item; for a file row the file to download */
  href?: string;
  /** text of the download link of a file row (default "Download") */
  linkText?: string;
  /** a photo keeps its proportions; icons and product shots sit in a fixed box so a row of them lines up */
  photo?: boolean;
}
const { title, image, description, href, linkText, photo = false } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
---

{img ? (
  <li class="text-center">
    {href ? (
      <a href={href} class="group block">
        <Image src={img} alt={title} widths={[400, 800]} class:list={['mx-auto w-full rounded-lg', photo ? 'h-auto' : 'h-48 object-contain']} />
        <p class="mt-4 text-lg font-medium text-gray-900 group-hover:text-primary-700">{title}</p>
      </a>
    ) : (
      <>
        <Image src={img} alt={title} widths={[400, 800]} class:list={['mx-auto w-full rounded-lg', photo ? 'h-auto' : 'h-48 object-contain']} />
        <p class="mt-4 text-lg font-medium text-gray-900">{title}</p>
      </>
    )}
    {description && <p class="mt-2 text-base text-gray-500">{description}</p>}
  </li>
) : (
  <li class="flex items-center justify-between rounded-md border border-gray-200 py-3 pl-3 pr-4 text-sm text-gray-900">
    <span class="flex w-0 flex-1 items-center"><PaperClip class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" /><span class="ml-2 w-0 flex-1 truncate">{title}</span></span>
    {href && <a href={href} download class="ml-4 flex-shrink-0 font-medium text-primary-600 hover:text-primary-500">{linkText ?? 'Download'}</a>}
  </li>
)}