libreria-astro-lefebvre/src/carbins/Contenido_2026_Cabra.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_Cabra',
  category: 'Contenido con listas',
  name: 'Sección de tabs interactivas con contenido y miniatura lateral 2026',
  description: 'Sección con pestañas horizontales en la parte superior que, al hacerse click, muestran un panel con título grande, listado de ítems (icono + texto) a la izquierda e imagen a la derecha. Incluye script inline que gestiona la conmutación entre pestañas y resalta la activa. La pestaña marcada como "default" es la que se muestra al cargar la página. Incluye structured data schema.org (WebPageElement con mainEntity ItemList de las pestañas)',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido'],
  fields: [
    {
      name: 'items',
      type: 'list',
      help: 'Listado de pestañas del tab. Cada pestaña tiene su nombre, contenido (items internos con icono y texto) e imagen. La pestaña marcada como "default" es la que se muestra al cargar; las demás arrancan ocultas y se activan al hacer click en su botón',
      label: 'Listado de pestañas',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
            { name: 'name', type: 'text', help: 'Introduce el nombre de la pestaña', label: 'Nombre de la pestaña', example_value: 'Pestaña 1' },
            { name: 'title', type: 'text', help: 'Título del elemento (h4)', label: 'Título', example_value: 'Redacción de contratos' },
            { name: 'description', type: 'textArea', help: 'Descripción del elemento', label: 'Descripción', example_value: 'Genera borradores de contratos a partir de plantillas personalizables en segundos' },
            { name: 'icon', type: 'text', help: 'Nombre del icono a mostrar junto al elemento. Consulta los valores aceptados en el componente Contenido_2026_Menorca', label: 'Icono', example_value: 'edit' },
            { name: 'buttonUrl', type: 'text', help: 'Introduce la URL de destino del botón (Solo es necesario completar este campo en uno de los elementos de la misma pestaña)', label: 'URL del botón', example_value: 'https://lefebvre.es' },
            { name: 'image', type: 'image', help: 'Introduce la URL de la imagen de la pestaña (Solo es necesario completar este campo en uno de los elementos de la misma pestaña)', label: 'Imagen', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' }
        ]
      }
    }
  ]
};