libreria-astro-lefebvre/src/carbins/TextImageBackground.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: 'TextImageBackground',
  category: 'Contenido de Imagen',
  name: 'Contenido con imagen de fondo',
  description: 'Tarjeta con imagen de background y texto para destacar contenido',
  framework: 'Astro',
  tags: ['card', 'interactivo','lefebvre.es'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Texto del título',
      label: 'Título',
      mandatory: true,
      example_value: 'Gatos<br>Haciendo cosas de gatos<br>Se un gato Lefebvre'
    },    
    {
      name: 'description',
      type: 'textArea',
      help: 'Descripción detallada en HTML',
      label: 'Contenido principal (HTML)',
      mandatory: true,
      example_value: `<p>Gatos que a lo largo de la historia han demostrado ser compañeros leales y fascinantes.</p>
        <p>Desde siempre han participado en todo tipo de actividades humanas, mostrando su adaptabilidad y encanto.</p>
        <p>Este es el autocompletado del copilot sobre los gatos y sus manías.</p>
        `
    },
    {
      name: 'image',
      type: 'image',
      help: 'Dirección de la imagen',
      label: 'URL de la imagen',
      mandatory: true,
      example_value: 'https://lefebvre.es/genia-l/images/genial/gradient-bg3.webp'
    },
    {
      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: 'right'
    },
  ]
  
};