ImageGallery

Набор из трёх компонентов для отображения фотогалереи с лайтбоксом (GLightbox):

• Grid — адаптивная сетка с умными паттернами раскладки (1–6+ фото)
• SimpleGrid — простая равномерная сетка в 2 колонки
• Sections — галерея, разбитая по секциям с заголовками

Grid

Входные параметры

interface Props {
  images: { url: string; title?: string; description?: string }[];
  gallery?: string;
}

Использование

---
import Grid from '@/blocks/image-gallery/ImageGalleryGrid.astro';
---

<Grid
  images={[
    { url: 'https://example.com/photo1.webp', title: 'Фото 1' },
    { url: 'https://example.com/photo2.webp', title: 'Фото 2' },
    { url: 'https://example.com/photo3.webp', title: 'Фото 3' },
  ]}
  gallery="my-gallery"
/>

SimpleGrid

Входные параметры

interface Props {
  images: { url: string; title?: string; description?: string }[];
  gallery?: string;
  title?: string;
}

Использование

---
import SimpleGrid from '@/blocks/image-gallery/ImageGallerySimpleGrid.astro';
---

<SimpleGrid
  images={[
    { url: 'https://example.com/photo1.webp', title: 'Фото 1' },
    { url: 'https://example.com/photo2.webp', title: 'Фото 2' },
  ]}
  gallery="simple-gallery"
  title="Название галереи"
/>

Sections

Входные параметры

interface Props {
  sections: {
    id: string;
    title: string;
    images?: { url: string; title?: string; description?: string }[];
  }[];
  variant?: 'grid' | 'simple';
  ctaHref?: string;
  ctaText?: string;
}

Использование

---
import Sections from '@/blocks/image-gallery/ImageGallerySections.astro';
---

<Sections
  variant="grid"
  ctaHref="/contacts/"
  ctaText="Записаться на тест-драйв"
  sections={[
    {
      id: 'exterior',
      title: 'Экстерьер',
      images: [
        { url: 'https://example.com/ext1.webp', title: 'Вид спереди' },
        { url: 'https://example.com/ext2.webp', title: 'Вид сбоку' },
      ],
    },
    {
      id: 'interior',
      title: 'Интерьер',
      images: [
        { url: 'https://example.com/int1.webp', title: 'Передние сиденья' },
      ],
    },
  ]}
/>