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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Contenido_2025_Granada',
  category: 'Contenido de Texto',
  name: 'Ítem con icono pequeño en recuadro gris y ancho configurable 2025',
  description: 'Ítem compacto para listados categorizados con un icono pequeño sobre fondo gris claro (23 variantes predefinidas: más, tienda, correcto, formación, caso, medalla, IA, balanza, compliance, librería, etc.), título con etiqueta HTML seleccionable (h1-h6/span) y descripción con soporte HTML. Layout flex configurable con control extra de ancho del bloque en orientación vertical (1/4 o 1/3 de columna)',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'icono', 'item', 'listado'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título del contenido. Se renderiza con la etiqueta HTML seleccionada en "Etiqueta del título" (h1-h6 o span). No admite HTML',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Certificación ISO 27001'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del título. Admite HTML. Alineada a la izquierda',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Gestión de la seguridad de la información conforme a estándares internacionales'
    },
    {
      name: 'tipo',
      type: 'select',
      help: 'Etiqueta HTML y tamaño del título. "h1" 56px izquierda, "h2" 40px izquierda, "h3"/"h4" 2xl semibold izquierda, "h3-20"/"h4-20" 20px regular centrado, "h5"/"h6" sin estilos, "span" texto gris sin formato',
      label: 'Etiqueta del título',
      options: ['h1', 'h2', 'h3', 'h3-20', 'h4', 'h4-20', 'h5', 'h6', 'span'],
      options_labels: ['H1', 'H2', 'H3', 'H3 20px', 'H4', 'H4 20px', 'H5', 'H6', 'Span'],
      example_value: 'h2'
    },
    {
      name: 'showIco',
      type: 'boolean',
      help: 'Si está activado, muestra el icono seleccionado en el campo "Icono" con fondo gris claro. Si está desactivado, no se renderiza el bloque del icono',
      label: 'Mostrar icono',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'icon',
      type: 'select',
      help: 'Icono que se muestra junto al contenido (solo si "Mostrar icono" está activado). Si se elige un valor fuera de la lista, no aparece ningún icono',
      label: 'Icono',
      options: ['more', 'shop', 'correct', 'formation', 'case', 'medal', 'medal2', 'search-text', 'checklist', 'certificate', 'ico-ok', 'shield', 'edit', 'ia', 'users', 'graphic', 'balance', 'calendar-check', 'documents', 'compliance', 'library', 'support', 'defendant'],
      options_labels: ['Más', 'Tienda', 'Correcto', 'Formación', 'Caso', 'Medalla', 'Medalla 2', 'Buscar texto', 'Checklist', 'Certificado', 'OK', 'Escudo', 'Editar', 'IA', 'Usuarios', 'Gráfico', 'Balanza', 'Calendario check', 'Documentos', 'Compliance', 'Librería', 'Soporte', 'Demandado'],
      example_value: 'more'
    },
    {
      name: 'positionFlex',
      type: 'select',
      help: 'Alineación vertical del icono respecto al bloque de texto. "Principio" alinea ambos arriba, "Centrado" los centra verticalmente',
      label: 'Posición del item',
      options: ['items-start', 'items-center'],
      options_labels: ['Principio', 'Centrado'],
      example_value: 'items-start'
    },
    {
      name: 'flexOrientationIcoText',
      type: 'select',
      help: 'Orientación del icono respecto al texto. "Horizontal" coloca el icono al lado del texto y el item ocupa todo el ancho disponible (en este modo el campo "Tamaño del bloque" no se aplica). "Vertical" apila el icono encima del texto y el item ocupa el ancho definido en "Tamaño del bloque"',
      label: 'Flex del item',
      options: ['flex-row', 'flex-col'],
      options_labels: ['Horizontal', 'Vertical'],
      example_value: 'flex-row'
    },
    {
      name: 'widthBlock',
      type: 'select',
      help: 'Ancho del bloque cuando se usa orientación vertical (solo aplica si "Flex del item" está en Vertical; en Horizontal se ignora). "1/4" → 50% en tablet y 25% en desktop. "1/3" → 33% en desktop',
      label: 'Tamaño del bloque (solo en orientación Vertical)',
      options: ['lg:w-1/4 md:w-2/4', 'lg:w-1/3'],
      options_labels: ['1/4', '1/3'],
      example_value: 'lg:w-1/4 md:w-2/4'
    },
   ]
};