libreria-astro-lefebvre/src/carbins/GeometricShapeCard.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: 'GeometricShapeCard',
  category: 'Imagen',
  name: 'Tarjeta con figura geométrica',
  description: 'Tarjeta con figura geométrica y botón de leer más.',
  framework: 'Astro',
  tags: ['card', 'interactivo'],
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Título',
      mandatory: true,
      example_value: 'Título de la tarjeta'
    },    
    {
      name: 'mainContent',
      type: 'textArea',
      label: 'Contenido principal (HTML)',
      mandatory: true,
      example_value: '<p>Este es el <b>contenido</b> principal.</p>'
    },
    {
      name: 'secondaryContent',
      type: 'textArea',
      label: 'Contenido secundario (HTML) que aparece al leer más',
      mandatory: false,
      example_value: '<p>Este es el contenido secundario.</p>'
    },
    {
      name: 'imageSrc',
      type: 'image',
      label: 'URL de la imagen',
      mandatory: true,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'
    },
    {
      name: 'figure',
      type: 'select',
      label: 'Tipo de figura',
      options: ['Trapeze', 'Trapeze2', 'Leaf', 'Sphere'],
      options_labels: ['Trapecio', 'Trapecio II', 'Hoja de parra', 'Esfera'],
      example_value: 'Trapeze'
    },
    {
      name: 'orientation',
      type: 'select',
      label: 'Orientación de la figura',
      options: ['right', 'left'],
      options_labels: ['Derecha','Izquierda'],
      example_value: 'right'
    },
    {
      name: 'gradiantIndex',
      type: 'select',
      label: 'Degradado',
      options: [0, 1, 2, 3, 4],
      options_labels: ['Lefebvre España', 'Lefebvre Sarrut', 'Lefebvre Italia', 'Lefebvre Toovalu', 'Bandera de España'],
      example_value: 0
    },
  ]
  
};