libreria-astro-lefebvre/src/carbins/Contenido_2026_Oslo.ts

Librería de componentes Astro, React y Vue para Lefebvre

import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Contenido_2026_Oslo',
  category: 'Contenido con listas',
  name: 'Grid de 3 columnas con thumbnails de vídeo que abren en popup iframe 2026',
  description: 'Grid responsive (3 columnas en desktop, 1 en móvil) de thumbnails de vídeo. Al hacer click en un thumbnail, el vídeo embebido (iframe Vimeo/YouTube) se abre en un popup modal. La descripción del ítem aparece debajo del thumbnail, y también se usa como alt de la imagen y en el structured data SEO del vídeo',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'popup', 'video', 'grid', 'modal', 'seo'],
   fields: [{
      name: 'items',
      type: 'list',
      help: 'Listado de vídeos que se muestran como grid (3 columnas en desktop, 1 en móvil). Cada thumbnail abre el vídeo en un popup al hacer click. Campo obligatorio: si no se pasa, el componente falla al renderizar',
      label: 'Items',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
          { name: 'iframeSrc', type: 'text', help: 'URL del vídeo embebido (Vimeo, YouTube, etc.) que se abrirá en el popup al hacer click en el thumbnail. Si se deja vacío, el popup abre sin contenido', label: 'Url del vídeo (iframe)', example_value: 'https://player.vimeo.com/video/123456' },
          { name: 'imageSrc', type: 'image', help: 'Thumbnail que se muestra en el grid antes de abrir el popup. Si se deja vacío, aparece una imagen rota', label: 'Thumbnail del vídeo', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
          { name: 'description', type: 'textArea', help: 'Descripción que aparece debajo del thumbnail (centrada, pequeña, semibold). Admite HTML. También se usa como alt de la imagen y en el structured data SEO. Si se deja vacía, el alt será "Video thumbnail" por defecto', label: 'Descripción', example_value: 'Automatización de contratos con IA' }
        ]
      }
    }]
};