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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Author_2025_Algarve',
  category: 'Contenido de Imagen',
  name: 'Ficha de autor con imagen y tiempo de lectura 2025',
  description: 'Ficha compacta de autor para cabeceras de artículo: imagen a la izquierda (con border-radius configurable), nombre subrayado y profesión a la derecha, y bloque opcional de "tiempo de lectura" al final. Para la corporativa de Lefebvre',
  framework: 'Astro',
  priority: 1,
  tags: ['autor', 'imagen', 'blog', 'cabecera', 'tiempo'],
   fields: [
    {
      name: 'nameAuthor',
      type: 'text',
      help: 'Nombre del autor. Se renderiza como párrafo subrayado (Inter 16px color #262626) y admite HTML (set:html). Conviene que ocupe una sola línea',
      label: 'Nombre del autor',
      mandatory: false,
      example_value: 'María García López'
    },
    {
      name: 'urlAuthor',
      type: 'text',
      help: 'URL opcional de la ficha/perfil del autor. Si se informa, el nombre del autor se renderiza como un enlace (<a>) que apunta a esa URL. Si se deja vacío, el nombre se muestra como texto plano (sin enlace)',
      label: 'URL del autor (enlace)',
      mandatory: false,
      example_value: 'https://www.lefebvre.es/autores/maria-garcia-lopez'
    },
    {
      name: 'descriptionAuthor',
      type: 'text',
      help: 'Profesión o descripción del autor. Se renderiza como párrafo (Inter 14px color #363942) debajo del nombre y admite HTML (set:html). Conviene que ocupe una sola línea',
      label: 'Descripción del autor',
      mandatory: false,
      example_value: 'Abogada especialista en Derecho Fiscal con 15 años de experiencia'
    },
    {
      name: 'imageAuthor',
      type: 'image',
      help: 'URL de la imagen del autor (se renderiza a la izquierda con aspect-ratio cuadrado y object-cover). Se muestra siempre; si se deja vacía, aparecerá una imagen rota',
      label: 'Src de la imagen del autor',
      mandatory: false,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png'
    },
    {
      name: 'imageAuthorAlt',
      type: 'text',
      help: 'Texto alternativo de la imagen para accesibilidad (atributo alt). Recomendado rellenar aunque la imagen sea decorativa',
      label: 'Alt de la imagen del autor',
      mandatory: false,
      example_value: 'Foto de perfil de María García López'
    },
    {
      name: 'minutes',
      type: 'text',
      help: 'Minutos de lectura del artículo. Se pasa al componente Tiempo_2025_Londres que se renderiza al final de la ficha. TERNARIO: si se deja vacío, el bloque de tiempo de lectura NO se muestra en absoluto',
      label: 'Minutos de lectura',
      mandatory: false,
      example_value: '20'
    },
    {
      name: 'borderRadius',
      type: 'text',
      help: 'Redondeo aplicado a la imagen del autor. SOLO se aceptan estos valores exactos: "sm" (rounded-sm), "md" (rounded-md), "lg" (rounded-lg), "full" (círculo completo — foto tipo avatar) o "48px" (rounded-[48px]). Si se deja vacío o se escribe cualquier otro valor, NO se aplica redondeo (imagen cuadrada)',
      label: 'Border radius de la imagen',
      mandatory: false,
      example_value: 'full'
    },
    {
      name: 'full',
      type: 'boolean',
      help: 'Controla el layout responsive del contenedor. Si es "true" (valor por defecto): no se aplica padding horizontal en móvil y la imagen NO tiene ancho mínimo. Si es "false": se añade padding horizontal px-8 en móvil y la imagen recibe un ancho mínimo de 48px (evita que se colapse en pantallas muy estrechas)',
      label: 'Modo ancho completo',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'imageSize',
      type: 'number',
      help: 'Tamaño máximo de la imagen en píxeles (ancho Y alto, aspect cuadrado). SOLO se aceptan estos valores exactos: 24, 48, 60, 120, 160, 180, 200, 240. Si se pasa cualquier otro valor, se usa 240 por defecto. También se aplica a los atributos width/height del <img> para ayudar al navegador a reservar el espacio',
      label: 'Tamaño de la imagen (px)',
      mandatory: false,
      options: [24, 48, 60, 120, 160, 180, 200, 240],
      options_labels: ['24px', '48px', '60px', '120px', '160px', '180px', '200px', '240px'],
      example_value: 240
    }
   ]
};