Back to Component Library Return to the main component library index
Code Components
Componentes de código CustomCodeBlock Bloque de código avanzado con reemplazo de marcadores de posición, notas pre/post y sección de salida opcional expansible.
Importar: import { CustomCodeBlock } from "/snippets/components/content/code.jsx" ;
Propiedades: Propiedad Tipo Predeterminado Requerido Descripción filenamestring- No Nombre del archivo para mostrar en el encabezado iconstring- No Icono a mostrar en el encabezado languagestring- No Lenguaje de programación para resaltado de sintaxis highlightstring- No Números de línea/rangos para resaltar (por ejemplo, “1-3,5”) codeStringstring""No El contenido del código a mostrar placeholderValuestring""No Valor para reemplazarcon wrapbooleantrueNo Si se debe envolver las líneas largas linesbooleantrueNo Si mostrar números de línea preNotestring""No Nota para mostrar antes del bloque de código postNotestring""No Nota para mostrar después del bloque de código outputobject- No Configuración de salida opcional output.codeStringstring- No Contenido de código de salida output.filenamestring- No Nombre de archivo de salida output.iconstring- No Icono de salida output.languagestring- No Idioma de salida
Ejemplos: Basic
With Placeholder
Code
const apiKey = 'your-key-here';
Add this to your configuration file
const API_KEY = 'your-api-key-here';
< CustomCodeBlock filename = "example.js" language = "javascript" codeString = "const apiKey = 'your-key';" preNote = "Configuration example" postNote = "Remember to keep your API key secure" />
CodeComponent Componente de envoltura para bloques de código simples.
Importar: import { CodeComponent } from "/snippets/components/content/code.jsx" ;
**Props:**Acepta props estándar de CodeBlock (language, filename, icon, etc.)
Nota: Este es un envoltorio alrededor del componente CodeBlock de Mintlify.ComplexCodeBlock Bloque de código avanzado con múltiples características, incluida la sustitución de marcadores de posición y secciones de salida.
Importar: import { ComplexCodeBlock } from "/snippets/components/content/code.jsx" ;
Props: Similar a CustomCodeBlock con manejo adicional de complejidad.CodeSection Envoltura de sección para organizar múltiples bloques de código.
Importar: import { CodeSection } from "/snippets/components/content/code.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción childrenReactNode- Sí Bloques de código para mostrar
External Content
Contenido externo ContenidoExterno Componente reutilizable para mostrar contenido externo de GitHub con encabezado y contenedor desplazable.
Importar: import { ExternalContent } from "/snippets/components/content/external-content.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción repoNamestring- Sí Nombre del repositorio (por ejemplo, “livepeer/awesome-livepeer”) githubUrlstring- Sí URL del repositorio de GitHub completo maxHeightstring"1000px"No Altura máxima del contenedor desplazable iconstring"github"No Icono a mostrar en el encabezado childrenReactNode- Sí Contenido a mostrar (normalmente importado MDX)
Ejemplos: External content from the Livepeer documentation repository.
Automatically styled container Link to GitHub source import MyContent from '/snippets/external/my-content.mdx' < ExternalContent repoName = "livepeer/awesome-livepeer" githubUrl = "https://github.com/livepeer/awesome-livepeer" maxHeight = "800px" > < MyContent /> </ ExternalContent >
API Response Fields
Campos de respuesta de la API CampoValorResponseField Envoltura ResponseField que muestra un valor con etiqueta y estilo de línea opcionales.
Importar: import { ValueResponseField } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción descriptionstring|function- No Texto de descripción o función que devuelve la descripción postanynullNo Valor para mostrar después de la descripción labelstring"value"No Etiqueta para el valor linebooleantrueNo Si mostrar la línea de borde inferior childrenReactNode- No Contenido adicional ...propsobject- No Propiedades adicionales de ResponseField (nombre, tipo, predeterminado, requerido, etc.)
CustomResponseField Wrapper de ResponseField que oculta el divisor inferior.
Importar: import { CustomResponseField } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción descriptionstring- No Texto de descripción ...propsobject- No Todos los props de ResponseField (nombre, tipo, predeterminado, requerido, post, etc.)
ResponseFieldExpandable Agrupa múltiples campos de respuesta en una sección expandible.
Importar: import { ResponseFieldExpandable } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción fieldsArray|Object{}No Matriz u objeto de definiciones de campo ...propsobject- No Propiedades del componente expandible (título, etc.)
ResponseFieldAccordion Agrupa varios campos de respuesta en un componente acordeón.
Importar: import { ResponseFieldAccordion } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción fieldsArray|Object{}No Matriz o objeto de definiciones de campos ...propsobject- No Propiedades del componente Accordion (título, etc.)
ResponseFieldGroup Envoltorio que elige un diseño de acordeón o expandido en tiempo de ejecución.
Importar: import { ResponseFieldGroup } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción componentstring"accordion"No Tipo de componente: “accordion” o “expandible” fieldsArray|Object{}No Matriz u objeto de definiciones de campo ...propsobject- No Propiedades del componente (título, etc.)
Data Display Components
Componentes de visualización de datos BlogCard Componente de tarjeta especialmente diseñado para artículos de blog con soporte para tiempo de lectura y extracto.
Importar: import { BlogCard } from "/snippets/components/content/data.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción titlestring- Sí El título del artículo de blog contentstring- Sí contenido HTML para mostrar hrefstring- Sí Enlace URL para la entrada de blog authorstring"Livepeer Team"No Nombre del autor datePostedstringnullNo Fecha de publicación excerptstringnullNo Excerpt corto (úselo si enlaza a un blog externo) readingTimenumbernullNo Tiempo estimado de lectura en minutos iconstring"book-open"No Icono para la tarjeta ctastring"Read More"No Texto del botón de acción imgstringnullNo URL de imagen opcional
PostCard Componente de tarjeta para mostrar publicaciones de foros o artículos con autor, fecha y metadatos.
Importar: import { PostCard } from "/snippets/components/content/data.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción titlestring- Sí El título de la publicación contentstring- Sí Contenido HTML para mostrar hrefstring- Sí URL del enlace para la tarjeta authorstring"Unknown"No Nombre del autor datePostedstringnullNo Fecha en que se publicó la entrada iconstring"book-open"No Icono que se muestra en la tarjeta ctastring"Read More"No Texto del botón de acción imgstringnullNo URL de imagen opcional para la tarjeta
CardBlogDataLayout Componente de diseño para mostrar múltiples BlogCards en un diseño vertical.
Importar: import { CardBlogDataLayout } from "/snippets/components/content/data.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción itemsArray[]No Matriz de objetos de props de BlogCard limitnumber- No Límite opcional en el número de elementos
ColumnasBlogCardLayout Componente de diseño para mostrar múltiples BlogCards en columnas.
Importar: import { ColumnsBlogCardLayout } from "/snippets/components/content/data.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción itemsArray[]No Matriz de objetos de propiedades de BlogCard colsnumber2No Número de columnas limitnumber- No Límite opcional en el número de elementos
CardColumnsPostLayout Componente de diseño para mostrar múltiples PostCards en columnas.
Importar: import { CardColumnsPostLayout } from "/snippets/components/content/data.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción colsnumber2No Número de columnas a mostrar itemsArray[]No Matriz de objetos de propiedades de PostCard limitnumber- No Límite opcional en el número de elementos
DiscordAnnouncements Muestra anuncios de Discord desde discordAnnouncementsData.jsx.
Importar: import { DiscordAnnouncements } from "/snippets/components/content/data.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción itemsArray[]No Matriz de objetos de anuncio limitnumber- No Límite opcional en el número de anuncios
**Nota:**Requiere datos de snippets/automations/discord/discordAnnouncementsData.jsx
LumaEvents Muestra eventos de Luma desde lumaEventsData.jsx.
Importar: import { LumaEvents } from "/snippets/components/content/data.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción dataObject- Sí objeto de datos del evento con matrices de próximos y pasados limitnumber- No Límite opcional en el número de eventos typestring"upcoming"No Tipo de eventos: “upcoming”, “past” o “all”
Nota: Requiere datos de snippets/automations/luma/lumaEventsData.jsx
Version Components
Componentes de versión ÚltimaVersión Envoltorio para la acción de GitHub que obtiene la versión de lanzamiento más reciente de go-livepeer.
Importar: import { LatestVersion } from "/snippets/components/content/release.jsx" ;
Props: Prop Tipo Predeterminado Requerido Descripción versionstring- Sí Cadena de versión (normalmente desde la acción de GitHub)
Next: Layout Components Continue to Layout Components →
Last modified on March 1, 2026
Code Components