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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Imagen_2026_Algar',
  category: 'Contenido de Imagen',
  name: 'Imagen básica con borde redondeado opcional y enlace opcional 2026',
  description: 'Componente básico que renderiza una única imagen de Limbo a ancho completo del contenedor padre. Sin padding ni margen lateral propio. Opciones: activar/desactivar borde redondeado (rounded-2xl) y envolver la imagen en un <a> clicable si se rellena el campo "Enlace".',
  framework: 'Astro',
  priority: 1,
  tags: ['basico', 'imagen'],
  fields: [
    {
      name: 'image',
      type: 'image',
      help: 'Imagen a renderizar. Selecciónala con el gestor Limbo. Se muestra a ancho completo del contenedor padre, manteniendo proporción (h-auto).',
      label: 'Imagen',
      mandatory: true,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'
    },
    {
      name: 'rounded',
      type: 'boolean',
      help: 'Si está activado, aplica esquinas redondeadas (rounded-2xl) a la imagen.',
      label: 'Borde redondeado',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['No', 'Sí'],
      example_value: false
    },
    {
      name: 'link',
      type: 'text',
      help: 'URL opcional. Si se rellena, la imagen queda envuelta en un <a href> y se hace clicable. Si se deja vacío, la imagen se renderiza sin enlace.',
      label: 'Enlace (opcional)',
      mandatory: false,
      example_value: ''
    },
    {
      name: 'altImage',
      type: 'text',
      help: 'Texto alternativo de la imagen (atributo alt). Importante para accesibilidad y SEO. Si la imagen es decorativa, déjalo vacío.',
      label: 'Texto alternativo (alt)',
      mandatory: false,
      example_value: 'Imagen descriptiva'
    }
  ]
};