libreria-astro-lefebvre
Version:
Librería de componentes Astro, React y Vue para Lefebvre
86 lines (84 loc) • 4.36 kB
text/typescript
import type { ComponentMetadata } from '../interfaces/types';
export const metadata: ComponentMetadata = {
component_name: 'Tabla_2026_Cadiz',
category: 'Contenido con listas',
name: 'Tabla de dos columnas independientes con título centrado 2026',
description: 'Tabla con título centrado (etiqueta configurable h2 o p con estilos de h2), descripción HTML y dos columnas independientes (izquierda y derecha) con sus títulos e ítems respectivos (strings planos sin HTML). Las columnas no están relacionadas entre sí: cada una muestra sus propios ítems sin sincronizar filas ni flecha separadora. Sin fondo en el contenedor. Layout responsive: apilado en móvil, grid de 2 columnas en desktop. TERNARIO: si AMBAS columnas tienen contenido → grid de 2 columnas; si solo UNA tiene contenido → se renderiza una única tabla con esa columna. Incluye structured data schema.org: emite uno o dos ItemList raíz independientes (uno por columna no vacía) para SEO.',
framework: 'Astro',
priority: 1,
tags: ['texto', 'tabla', 'columnas', 'lista'],
fields: [
{
name: 'title',
type: 'text',
help: 'Título superior de la tabla, centrado. Solo se muestra si tiene valor; si se deja vacío, NO aparece',
label: 'Texto del título',
mandatory: false,
example_value: 'Nuestros servicios'
},
{
name: 'titleTag',
type: 'select',
help: 'Etiqueta HTML del título. "h2" es un encabezado semántico; "p" mantiene los mismos estilos visuales del h2 pero sin jerarquía de encabezado',
label: 'Tipo de título',
mandatory: false,
options: ['h2', 'p'],
options_labels: ['Encabezado h2', 'Párrafo (estilos de h2)'],
example_value: 'h2'
},
{
name: 'description',
type: 'text',
help: 'Descripción debajo del título. Admite HTML. Solo se muestra si tiene valor',
label: 'Texto de la descripción',
mandatory: false,
example_value: 'Todo lo que necesitas para tu despacho'
},
{
name: 'leftTitle',
type: 'text',
help: 'Título de la columna izquierda',
label: 'Título columna izquierda',
mandatory: false,
example_value: 'Servicios incluidos'
},
{
name: 'leftItems',
type: 'list',
help: 'Ítems de la columna izquierda. Cada ítem tiene un texto obligatorio y un enlace opcional. Si se rellena "link", el texto se renderiza como <a>; si se deja vacío, como texto plano',
label: 'Ítems columna izquierda',
mandatory: false,
items: {
type: 'object',
fields: [
{ name: 'text', type: 'text', help: 'Texto visible del ítem', label: 'Texto del ítem', example_value: 'Asesoría fiscal' },
{ name: 'link', type: 'text', help: 'URL de destino (opcional). Si se rellena, el ítem se convierte en enlace', label: 'Enlace (opcional)', example_value: '' },
{ name: 'target', type: 'select', help: 'Cómo se abre el enlace: misma pestaña o nueva pestaña', label: 'Apertura del enlace', options: ['_self', '_blank'], options_labels: ['Misma pestaña', 'Nueva pestaña'], example_value: '_self' },
]
}
},
{
name: 'rightTitle',
type: 'text',
help: 'Título de la columna derecha',
label: 'Título columna derecha',
mandatory: false,
example_value: 'Servicios adicionales'
},
{
name: 'rightItems',
type: 'list',
help: 'Ítems de la columna derecha. Cada ítem tiene un texto obligatorio y un enlace opcional. Si se rellena "link", el texto se renderiza como <a>; si se deja vacío, como texto plano',
label: 'Ítems columna derecha',
mandatory: false,
items: {
type: 'object',
fields: [
{ name: 'text', type: 'text', help: 'Texto visible del ítem', label: 'Texto del ítem', example_value: 'Formación online' },
{ name: 'link', type: 'text', help: 'URL de destino (opcional). Si se rellena, el ítem se convierte en enlace', label: 'Enlace (opcional)', example_value: '' },
{ name: 'target', type: 'select', help: 'Cómo se abre el enlace: misma pestaña o nueva pestaña', label: 'Apertura del enlace', options: ['_self', '_blank'], options_labels: ['Misma pestaña', 'Nueva pestaña'], example_value: '_self' },
]
}
}
]
};