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

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

// dame en un string el codigo html resultante de la renderizacion de este componente quitando las clases de tailwind y poniendo estilos inline de css, no debe tener codigo js, es para hcer una preview

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

export const metadata: ComponentMetadata = {
  component_name: 'TextImageHeader',
  category: 'Contenido de Imagen',
  name: 'Contenido de texto con imagen y polígono con degradado',
  description: 'Cabecera con texto destacado, imagen y botón de acción personalizable. Ideal para resaltar información clave en páginas principales.',
  framework: 'Astro',
  tags: ['card','lefebvre.es'],
  fields: [
    {
      name: 'pretitle',
      type: 'text',
      help: 'Texto del pretítulo',
      label: 'Pretítulo',
      mandatory: false,
      example_value: 'GATOS'
    },    
    {
      name: 'title',
      type: 'text',
      help: 'Texto del título',
      label: 'Título',
      mandatory: true,
      example_value: 'Gatos con ganas de hacer travesuras'
    },    
    {
      name: 'description',
      type: 'textArea',
      help: 'Descripción detallada en HTML',
      label: 'Contenido principal (HTML)',
      mandatory: true,
      example_value: `<p><b>No trabajes más, trabaja mejor.</b> GenIA-L no sólo domina la jurisprudencia, sino que piensa como tú: además de hablar el mismo idioma, 
    es la primera IA que razona de forma lógica cómo abordar los desafíos legales más complejos.</p>
    <p>En Lefebvre hemos ido un paso más allá, combinando el llamado razonamiento profundo con la base de datos jurídica más completa. ¿El resultado?</p>
        `
    },
    {
      name: 'buttonText',
      type: 'text',
      help: 'Texto del botón',
      label: 'Texto del botón',
      mandatory: true,
      example_value: 'Adopta un gato'
    },    
    {
      name: 'buttonUrl',
      type: 'text',
      help: 'Enlace del botón',
      label: 'URL del botón',
      mandatory: true,
      example_value: '/conocenos'
    },
    {
      name: 'image',
      type: 'image',
      help: 'Dirección de la imagen',
      label: 'URL de la imagen',
      mandatory: true,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-4-3.png'
    },
    {
      name: 'orientation',
      type: 'select',
      help: 'Posición de la imagen',
      label: 'Orientación de la figura',
      options: ['right', 'left'],
      options_labels: ['Derecha','Izquierda'],
      example_value: 'left'
    },
  ]
};