Cree un panel de control al estilo Sonara con organizaciones de Clerk y transferencia por TTS
Un panel de control de React después del inicio de sesión al estilo Sonara: barra lateral consciente de la organización, fondo de ondas en lienzo, estimación en tiempo real de costos de TTS y comandos de muestra con un clic.
El capítulo anterior trataba sobre la autenticación y la persistencia: infraestructuras que nadie observa. Este capítulo corresponde a la primera pantalla que ven las personas después de iniciar sesión: el panel de control. El objetivo es hacer que esa pantalla principal parezca un producto y no algo provisional.
La barra lateral
La navegación se encuentra en una barra lateral plegable. Puede reducirse a íconos cuando hay poco espacio, muestra los destinos principales (Panel de control, Explorar voces, Texto a voz, Clonación de voces) y coloca en la parte superior el selector de organizaciones de Clerk.
Ese selector es fundamental aquí. Cada cuenta pertenece a una organización; no existen espacios de trabajo personales independientes. Por lo tanto, el cambio entre equipos se realiza a través del control de la barra lateral, y no desde una página de configuraciones oculta. Debe formar parte de la navegación principal.
En la parte inferior de la barra lateral se encuentra el menú del usuario, con un pequeño bloque de “Otros” encima para Acciones y ayuda. Acciones no abre una página personalizada; en su lugar, muestra el panel del perfil de la organización de Clerk. Reconstruir esa interfaz no aporta mucho cuando el proveedor ya ofrece una sólida.
El estado de abierto o cerrado se almacena en una cookie, de modo que al actualizar la página no aparece primero la barra ancha y luego vuelve a cerrarse. Detalles tan sencillos de persistencia son lo que diferencia una interfaz bien pensada de un simple conjunto de componentes.
El fondo
Detrás del contenido principal, una ola animada suave se mueve lentamente. Está dibujada sobre un lienzo con ruido simplex en lugar de un mapa de bits repetitivo, por lo que el patrón no se repite de forma evidente. Las opciones de paleta se mantienen en tonos verdes y azules apagados con baja opacidad. La versión para escritorio mantiene este efecto; la móvil lo oculta, ya que en los dispositivos móviles los píxeles son más importantes que el ambiente visual.
<WavyBackground
colors={["#2DD4BF", "#22D3EE", "#38BDF8", "#818CF8"]}
blur={3}
speed="slow"
waveOpacity={0.1}
/>
La moderación es intencional. El movimiento ocurre detrás de la interfaz con baja opacidad y a baja velocidad; se percibe más como un toque de refinamiento que como una decoración que se analiza detenidamente.
El campo de texto
El panel se centra en un campo de texto destinado a ser copiado y posteriormente convertido en voz. Se encuentra dentro de una tarjeta con un borde degradado suave (de rosa a cian). Lograr que ese borde pareciera un trazo continuo requirió aplicar varias capas; el resultado debe verse como un único borde en lugar de una caja plana.
Abajo del campo, el recuento en tiempo real de caracteres y la estimación de costos se actualizan a medida que el usuario escribe, utilizando una tarifa fija por carácter. Los precios permanecen visibles desde el principio, en lugar de aparecer solo en una pantalla de confirmación posterior.
${(text.length * COST_PER_UNIT).toFixed(4)} estimated
Quien vaya a sintetizar miles de caracteres puede ver el costo aproximado antes de presionar generar, y no después.
En esta etapa, el control de generación aún no llama al modelo. Redirige a la página de texto a voz con el texto preliminar como parámetro de consulta. La síntesis real espera hasta que existan una voz y un modelo. La función del panel de control es capturar el contenido y transferirlo.
Acciones rápidas
Abajo del campo, hay una fila de tarjetas de ejemplo que muestran cómo narrar una historia, grabar un anuncio, dirigir una escena de película, dar voz a un personaje de juego, presentar un podcast y guiar una meditación. Cada tarjeta incluye un ejemplo breve específico para cada caso de uso. Al activar una, se abre la función de texto a voz con ese ejemplo ya ingresado.
{
title: "Voice a Game Character",
description: "Build immersive worlds with dynamic character voices",
href: "/text-to-speech?text=Listen up, adventurer. The realm of Ashenvale is crumbling...",
}
Los ejemplos listos son mejores que un cuadro vacío junto con un modal de tutorial. Los usuarios curiosos pueden escuchar un ejemplo de un personaje de juego sin tener que crear primero una instrucción; con un solo clic obtienen algo audible.
Combinándolo todo
El encabezado, el fondo, los campos de entrada y las acciones rápidas conforman la ruta del panel de control. En dispositivos móviles se utiliza un encabezado sencillo (botón para abrir el menú y título). En equipos de escritorio se muestra un saludo con el nombre de la persona además de algunos enlaces de retroalimentación.
Ninguno de estos elementos es excepcional: una barra lateral, un fondo, un cuadro de texto y tarjetas de ejemplo. Juntos crean la primera impresión tras iniciar sesión e influyen en si alguien se queda el tiempo suficiente para generar audio.
El capítulo siguiente trata sobre la página de conversión de texto a voz en sí. El trabajo realizado en este capítulo se materializa como un único commit de funcionalidad para la barra lateral del panel de control, el diseño general y la página principal.
Lecturas relacionadas
- Flujos de trabajo para profesores de instrumentos con autorecogida de PostHog y eventos personalizados — Integra la autorecogida de PostHog, los eventos de resultados, la reproducción de sesiones y las líneas de tiempo individuales para que los productos educativos asistidos por IA midan las tareas completadas, no solo los clics.
- Sustituyendo ESLint y Prettier por Biome: Velocidad frente a la regla de Hooks que todavía se necesita — Tiempos de ejecución en laboratorio para Biome frente a ESLint y Prettier, la diferencia entre react-hooks/exhaustive-deps, y cuándo, al ejecutar ambos, usar un solo plugin de ESLint es la migración más adecuada.