Componentes de visualización

Back to Component Library

Return to the main component library index

Video Components

Componentes de video

YouTubeVideo

Incorpora un video de YouTube con una leyenda opcional y atribución del autor. Muestra un video de YouTube en un iframe adaptativo dentro de un componente Frame. Importar:

import { YouTubeVideo } from "/snippets/components/display/video.jsx";

Props:

Propiedad	Tipo	Predeterminado	Requerido	Descripción
`embedUrl`	`string`	-	Sí	URL de incrustación de YouTube (por ejemplo, “https://www.youtube.com/embed/VIDEO_ID”)
`title`	`string`	`""`	No	Título del video para accesibilidad y visualización de subtítulos
`author`	`string`	`""`	No	Nombre del autor para mostrar en el subtítulo
`hint`	`string`	`""`	No	Texto de pista opcional para mostrar
`caption`	`string`	-	No	Legenda personalizada (sobrescribe el formato autor/título)

Ejemplos:

Code

<YouTubeVideo embedUrl="https://www.youtube.com/embed/VIDEO_ID" />

<YouTubeVideo 
  embedUrl="https://www.youtube.com/embed/VIDEO_ID"
  author="Livepeer"
  title="Video Title"
  hint="Click to play"
/>

**Nota:**YouTubeVideo no disponible actualmente debido a un error en el componente. Consulte component-bugs.md para obtener más detalles.

Vídeo

Componente de video autohospedado con envoltura Frame. Muestra un archivo de video autohospedado dentro de un componente Frame. Importar:

import { Video } from "/snippets/components/display/video.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`src`	`string`	-	Sí	Ruta del archivo de video (por ejemplo, “/snippets/assets/media/videos/HeroBackground.mp4”)
`title`	`string`	`""`	No	Título del video para accesibilidad
`author`	`string`	`""`	No	Nombre del autor para mostrar con el icono de micrófono
`caption`	`string`	-	No	Texto de leyenda opcional (si el autor lo proporcionó, con icono estilizado)
`href`	`string`	`""`	No	URL de enlace opcional para el autor
`controls`	`boolean`	`true`	No	Si mostrar controles de video
`autoPlay`	`boolean`	`false`	No	Si reproducir el video automáticamente
`loop`	`boolean`	`false`	No	Si repetir el video
`muted`	`boolean`	`false`	No	Si se debe silenciar el video
`children`	`ReactNode`	-	No	Hijos opcionales para renderizar dentro de Frame

Ejemplos:

Basic
Autoplay Loop
With Author
Code

<Video src="/snippets/assets/media/videos/HeroBackground.mp4" title="Demo Video" />

<Video 
  src="/snippets/assets/media/videos/HeroBackground.mp4" 
  autoPlay
  muted
  loop
  author="Author Name"
  title="Video Title"
/>

TitledVideo

Un componente de video con un título en superposición. Muestra un video en bucle con un título opcional en superposición y un borde con estilo. Importar:

import { TitledVideo } from "/snippets/components/display/video.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`src`	`string`	-	Sí	URL de la fuente del video
`title`	`string`	-	No	Texto del título para superponer en el video
`subtitle`	`string`	-	No	Texto del subtítulo para superponer
`arrow`	`boolean`	`false`	No	Si mostrar el indicador de flecha
`borderRadius`	`string`	`"12px"`	No	Radio de borde del video
`style`	`object`	`{}`	No	Estilos adicionales para el contenedor

Ejemplos:

With Title
Code

Daydream Demo

<TitledVideo
  src="/snippets/assets/media/videos/HeroBackground.mp4"
  title="Demo Title"
  subtitle="Subtitle text"
  arrow={true}
/>

ShowcaseVideo

Componente de video de presentación con estilo personalizado para páginas de presentación. Importar:

import { ShowcaseVideo } from "/snippets/components/display/video.jsx";

**Props:**Mismo queTitledVideo (utiliza TitledVideo internamente con estilo específico de presentación)

CardVideo

Vídeo de YouTube integrado en un componente Card. Muestra un vídeo de YouTube dentro de un componente Card con una leyenda de título debajo. Importar:

import { CardVideo } from "/snippets/components/display/video.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`embedUrl`	`string`	-	Sí	URL de incrustación de YouTube
`title`	`string`	-	Sí	Título del video para mostrar debajo del video
`style`	`object`	-	No	Estilos adicionales

Ejemplos:

Code

<CardVideo
  embedUrl="https://www.youtube.com/embed/VIDEO_ID"
  title="Video Title"
/>

**Nota:**CardVideo actualmente no disponible debido a un error en el componente. Consulte component-bugs.md para más detalles.

LinkedInEmbed

Incorpora una publicación de LinkedIn con una leyenda y una pista opcionales. Cumple con los requisitos oficiales de incorporación de LinkedIn. Importar:

import { LinkedInEmbed } from "/snippets/components/display/video.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`embedUrl`	`string`	-	Sí	URL de incrustación de LinkedIn (debe incluir ?compact=1)
`title`	`string`	`"Embedded post"`	No	Título de la publicación para accesibilidad
`hint`	`string`	`""`	No	Texto de pista opcional
`caption`	`string`	-	No	Texto de leyenda opcional
`height`	`string`	`"399"`	No	Altura del iframe de incrustación

Ejemplos:

Code

<LinkedInEmbed
  embedUrl="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7387171661868933120?compact=1"
  title="Livepeer Update"
  caption="Latest news from the Livepeer team"
  height="500"
/>

YouTubeVideoData

Renderiza videos de YouTube desde el formato youtubeData.jsx. Convierte las URL de reproducción de YouTube en URL de incrustación y las muestra en una cuadrícula. Importar:

import { YouTubeVideoData } from "/snippets/components/display/video.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`items`	`Array`	`[]`	No	Matriz de objetos de video desde youtubeData.jsx
`limit`	`number`	-	No	Límite opcional en el número de videos
`cols`	`number`	`2`	No	Número de columnas para el diseño de cuadrícula

Nota: Requiere datos de snippets/automations/youtube/youtubeData.jsx

YouTubeVideoDownload

Espacio reservado para un video de YouTube con funcionalidad de descarga. Actualmente no funcional (obsoleto). Nota: Este componente está obsoleto. Usa YouTubeVideo en su lugar.

Image Components

Componentes de imagen

Imagen

Componente de imagen con envoltura Frame. Muestra una imagen dentro de un componente Frame con opción de leyenda y pista. Importar:

import { Image } from "/snippets/components/display/image.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`src`	`string`	-	Sí	URL de la fuente de la imagen
`alt`	`string`	-	Sí	Texto alternativo para accesibilidad
`caption`	`string`	-	No	Texto opcional para mostrar debajo de la imagen
`icon`	`string`	-	No	Nombre del icono (actualmente no utilizado)
`hint`	`string`	-	No	Texto de pista opcional
`fullwidth`	`boolean`	`true`	No	Si mostrar la imagen a ancho completo

Ejemplos:

Basic
With Caption
Code

<Image 
  src="/snippets/assets/media/images/Livepeer%20Stats.png" 
  alt="System Diagram"
  caption="Figure 1: Architecture"
/>

LinkImage

Imagen clickeable que se abre en una nueva pestaña. Muestra una imagen dentro de un componente Frame que enlaza a una URL. Importar:

import { LinkImage } from "/snippets/components/display/image.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`src`	`string`	-	Sí	URL de la fuente de la imagen
`alt`	`string`	-	Sí	Texto alternativo para accesibilidad
`caption`	`string`	-	No	Legenda opcional para mostrar debajo de la imagen
`icon`	`string`	-	No	Nombre del icono (actualmente no utilizado)
`hint`	`string`	-	No	Texto de pista opcional
`href`	`string`	-	Sí	URL para navegar cuando se hace clic en la imagen

Ejemplos:

Example
Code

<LinkImage 
  src="/snippets/assets/media/images/GPUImg.webp" 
  alt="Preview"
  href="/snippets/assets/media/images/DelegatorImg.avif"
  caption="Click to view full size"
/>

Embed Components

Componentes de incrustación

MarkdownEmbed

Recupera y renderiza contenido de markdown desde una URL. Recupera dinámicamente el contenido de markdown desde una URL remota y lo renderiza. Importar:

import { MarkdownEmbed } from "/snippets/components/display/embed.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`url`	`string`	-	Sí	URL del archivo de markdown para recuperar y mostrar

Ejemplos:

Code

<MarkdownEmbed url="https://raw.githubusercontent.com/user/repo/main/README.md" />

EmbedMarkdown

Alias para MarkdownEmbed. Nombre alternativo para el mismo componente. Importar:

import { EmbedMarkdown } from "/snippets/components/display/embed.jsx";

TwitterTimeline

Incorpora una línea de tiempo de Twitter/X mediante un widget de iframe. Importar:

import { TwitterTimeline } from "/snippets/components/display/embed.jsx";

**Props:**Ninguno (usa una URL de widget predeterminada) Ejemplos:

Code

<TwitterTimeline />

Quote Components

Componentes de cotización

Cotización

Componente de cotización simple con borde con estilo y texto en cursiva. Importar:

import { Quote } from "/snippets/components/display/quote.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido de cita

Ejemplos:

Basic
Code

“Livepeer is the future of decentralized video infrastructure.”

<Quote>
  "Your quote text here"
</Quote>

FrameQuote

Componente de cita con envoltura Frame, autor, fuente y imagen opcionales. Importar:

import { FrameQuote } from "/snippets/components/display/quote.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido de la cita
`author`	`string`	-	No	Nombre del autor
`source`	`string`	-	No	Nombre de la fuente
`href`	`string`	-	No	URL del enlace para la fuente
`frame`	`boolean`	`true`	No	Si se debe envolver en Frame
`align`	`string`	`"right"`	No	Alineación: “izquierda”, “centro”, “derecha”
`borderColor`	`string`	-	No	Color de borde
`img`	`object`	-	No	Objeto de imagen con `src` y `alt`

Ejemplos:

With Author
Code

“Livepeer enables decentralized video streaming at scale.”

Doug Petkanics

Livepeer Blog

<FrameQuote 
  author="Author Name" 
  source="Source Name"
  href="https://example.com"
  align="center"
>
  "Quote text here"
</FrameQuote>

Carousel & Showcase

Componentes de carrusel y muestra

CardCarousel

Renderiza un carrusel simple que navega a través de un número fijo de tarjetas. Importar:

import { CardCarousel } from "/snippets/components/display/CardCarousel.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Elementos de tarjeta para mostrar
`visibleCount`	`number`	`3`	No	Número de tarjetas a mostrar por vista
`gap`	`string\|number`	`"1.5rem"`	No	Espacio entre tarjetas (valor CSS)
`showDots`	`boolean`	`true`	No	Si mostrar los puntos del indicador de página
`style`	`object`	-	No	Invalidaciones del estilo del contenedor

Ejemplos:

Code

<CardCarousel visibleCount={3}>
  <Card title="Card 1">Content 1</Card>
  <Card title="Card 2">Content 2</Card>
  <Card title="Card 3">Content 3</Card>
  <Card title="Card 4">Content 4</Card>
</CardCarousel>

Tarjetas de presentación

Componente de tarjetas de presentación interactivas con búsqueda, filtrado y paginación. Importar:

import { ShowcaseCards } from "/snippets/components/display/showcaseCards.jsx";

Props:

Propiedad	Tipo	Predeterminado	Requerido	Descripción
`items`	`Array`	`[]`	No	Matriz de objetos de elemento de exposición
`limit`	`number`	`null`	No	Límite opcional en el número de elementos
`pageSize`	`number`	`10`	No	Número de elementos por página

Estructura del objeto de elemento:

title - Título de la tarjeta
subtitle - Subtítulo de la tarjeta
description - Descripción de la tarjeta
href - URL del enlace
categoryTags - Matriz de cadenas de categoría
productTags - Matriz de cadenas de producto
mediaSrc - Origen de la imagen/vídeo
mediaType - “imagen” o “vídeo”
logo - URL de la imagen del logotipo
links - Matriz de objetos de enlace

Ejemplos:

Code

const items = [
  {
    title: "Project Name",
    subtitle: "Subtitle",
    description: "Description",
    href: "/project",
    categoryTags: ["Apps"],
    productTags: ["Livepeer"],
    mediaSrc: "/images/project.png",
    mediaType: "image"
  }
];

<ShowcaseCards items={items} limit={10} pageSize={6} />

Diagram Components

Componentes del diagrama

ScrollableDiagram

Visualizador de diagrama interactivo con controles de zoom (25%-200%) y soporte de desplazamiento. Importar:

import { ScrollableDiagram } from "/snippets/components/display/zoomable-diagram.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Diagrama o contenido a mostrar
`title`	`string`	`""`	No	Título opcional para mostrar sobre el diagrama
`maxHeight`	`string`	`"500px"`	No	Altura máxima del contenedor desplazable
`minWidth`	`string`	`"100%"`	No	Ancho mínimo del área de contenido

Ejemplos:

Basic
Code

<ScrollableDiagram title="System Architecture" maxHeight="600px">
  <img src="/snippets/assets/media/images/Livepeer%20Stats.png" alt="Architecture" />
</ScrollableDiagram>

Social Components

Componentes sociales

SocialLinks

Enlaces de iconos de redes sociales para Livepeer. Muestra una fila de enlaces de iconos de redes sociales con colores oficiales de la marca. Importar:

import { SocialLinks } from "/snippets/components/display/socialLinks.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`size`	`number`	`20`	No	Tamaño del icono
`gap`	`string`	`"0.75rem"`	No	Espacio entre iconos
`justify`	`string`	`"center"`	No	Justificar contenido: “center”, “flex-start”, “flex-end”
`color`	`string`	-	No	Sobrescribir color para todos los iconos

Ejemplos:

Default
Custom
Code

<SocialLinks />
<SocialLinks size={24} justify="flex-start" />

Frame Mode Components

Componentes del modo de marco

Componentes para usar en las páginas del modo de marco Mintlify. Estos proporcionan títulos y texto con estilo que funcionan correctamente cuandomode: framese establece en el frontmatter.

PageHeader

Componente de encabezado de página completa con título, subtítulo, descripción y división. Importar:

import { PageHeader } from "/snippets/components/display/frameMode.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`title`	`string`	-	Sí	Texto del título principal
`subtitle`	`string`	-	No	Texto de subtítulo
`description`	`string`	-	No	Texto de descripción
`titleColor`	`string`	`"var(--hero-text)"`	No	Color del título
`subtitleColor`	`string`	`"var(--accent)"`	No	Color del subtítulo
`descriptionColor`	`string`	-	No	Color de la descripción
`children`	`ReactNode`	-	No	Contenido adicional

Ejemplos:

Basic
Code

<PageHeader 
  title="Page Title"
  subtitle="Subtitle"
  description="Description"
/>

H1, H2, H3, H4, H5, H6

Componentes de encabezado personalizados para el modo de marco con iconos opcionales. Importar:

import { H1, H2, H3, H4, H5, H6 } from "/snippets/components/display/frameMode.jsx";

Props (todos los títulos):

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Texto del título
`icon`	`string`	-	No	Nombre del icono o ruta a SVG compatible con el tema
`iconSize`	`number`	varía	No	Tamaño del icono (H1: 32, H2: 28, H3: 24, H4: 20, H5: 18, H6: 16)
`iconColor`	`string`	`"var(--accent)"`	No	Color del icono
`align`	`string`	`"left"`	No	Alineación del texto: “izquierda”, “centro”, “derecha”
`gap`	`string`	varía	No	Espacio entre el icono y el texto

Ejemplos:

Headings
Code

<H1 icon="rocket">Main Title</H1>
<H2 icon="star" align="center">Section Title</H2>
<H3>Subsection</H3>

P

Componente de párrafo personalizado para el modo de marco con icono opcional. Importar:

import { P } from "/snippets/components/display/frameMode.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Texto de párrafo
`icon`	`string`	-	No	Nombre o ruta del icono
`iconSize`	`number`	`16`	No	Tamaño del icono
`iconColor`	`string`	Con conciencia de tema	No	Color del icono
`align`	`string`	`"left"`	No	Alineación del texto
`gap`	`string`	`"0.5rem"`	No	Espacio entre el icono y el texto

Ejemplos:

Code

// P component with icon currently unavailable due to component bug
// Use P without icon prop, or see component-bugs.md for details
<P align="center">Centered text</P>

Divisor

Línea horizontal para el modo de marco. Muestra una regla horizontal con estilo adecuado. Importar:

import { Divider } from "/snippets/components/display/frameMode.jsx";

Props:

Propiedad	Tipo	Predeterminado	Requerido	Descripción
`color`	`string`	`"var(--border)"`	No	Color personalizado para el divisor
`margin`	`string`	`"1.5rem 0"`	No	Margen vertical
`opacity`	`number`	`0.2`	No	Opacidad del divisor

Ejemplos:

Example
Code

<Divider />
<Divider margin="2rem 0" opacity={0.5} />

Next: Content Components

Continue to Content Components →

Home

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Back to Component Library

​Componentes de video

​YouTubeVideo

​Vídeo

​TitledVideo

​ShowcaseVideo

​CardVideo

​LinkedInEmbed

​YouTubeVideoData

​YouTubeVideoDownload

​Componentes de imagen

​Imagen

​LinkImage

​Componentes de incrustación

​MarkdownEmbed

​EmbedMarkdown

​TwitterTimeline

​Componentes de cotización

​Cotización

​FrameQuote

​Componentes de carrusel y muestra

​CardCarousel

​Tarjetas de presentación

​Componentes del diagrama

​ScrollableDiagram

​Componentes sociales

​SocialLinks

​Componentes del modo de marco

​PageHeader

​H1, H2, H3, H4, H5, H6

​P

​Divisor

Next: Content Components

Componentes de video

YouTubeVideo

Vídeo

TitledVideo

ShowcaseVideo

CardVideo

LinkedInEmbed

YouTubeVideoData

YouTubeVideoDownload

Componentes de imagen

Imagen

LinkImage

Componentes de incrustación

MarkdownEmbed

EmbedMarkdown

TwitterTimeline

Componentes de cotización

Cotización

FrameQuote

Componentes de carrusel y muestra

CardCarousel

Tarjetas de presentación

Componentes del diagrama

ScrollableDiagram

Componentes sociales

SocialLinks

Componentes del modo de marco

PageHeader

H1, H2, H3, H4, H5, H6

P

Divisor