Gallery

Props

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

---
/**
 * Gallery — pictures with captions in a grid (<GalleryItem>): team photos,
 *   certificates, product shots, references.
 *
 * Use for: a set of pictures that each need a caption, optionally linking
 *   somewhere.
 * Not for: a decorative photo band (<BannerImage>); files without pictures
 *   (<Downloads>).
 * Children: <GalleryItem> tags.
 * Layout: `columns` 2–4 (default 3).
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** pictures per row on desktop */
  columns?: 2 | 3 | 4;
  /** background of the section */
  theme?: Theme;
}
const { id, title, description, columns = 3, theme = 'light' } = Astro.props;
const cols = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-2 lg:grid-cols-3', 4: 'sm:grid-cols-2 lg:grid-cols-4' }[columns];
---

<Section id={id} title={title} description={description} theme={theme}>
  <ul class:list={['grid list-none grid-cols-1 gap-8', cols]} data-variant="cards">
    <slot />
  </ul>
</Section>