FeedbackDisponible
Listening Indicator
Onda decorativa de reproducción que solo se anima mientras suena la voz.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/listening-indicator.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
tsx
import { ListeningIndicator } from "@/components/ui/listening-indicator";
export default function Demo() {
return (
<div className="grid gap-4 sm:grid-cols-3">
{(["speaking", "idle", "unavailable"] as const).map((status) => (
<figure key={status} className="grid justify-items-center gap-2">
<ListeningIndicator status={status} />
<figcaption className="bl-type-small">{status}</figcaption>
</figure>
))}
</div>
);
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| status | AudioStatus | Required | Actual playback state supplied by the consumer. |
| reducedMotion | boolean | false | In-app preference; the system preference also stops the bars. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Es decorativa y queda oculta para tecnologías de asistencia; anuncia la reproducción con texto en otro lugar.
Nunca pide el micrófono ni mide el volumen.