Actúa como un experto en UX y Normativas Laborales.
Crea un formulario interactivo basado en la NOM-035-STPS-2018 (Guía de Referencia III) para identificar factores de riesgo psicosocial.
Fuente de Datos (Usa este JSON exacto):
Requerimientos de Generación:
Iteración Dinámica: No crees campos manuales. Usa bucles (como .map() en React) para recorrer el JSON proporcionado y generar una sección para cada objeto en el arreglo (ambiente, carga, control, etc.).
Renderizado de Preguntas: Dentro de cada sección, genera una tarjeta o campo para cada pregunta individual.
Sistema de Escala Likert: Para cada pregunta, crea un grupo de botones de opción (RadioGroup) iterando sobre las opciones proporcionadas en el JSON ESCALA_LIKERT, mostrando la 'etiqueta' como texto y asignando el 'valor' numérico internamente.
Estructura: Organiza las secciones en un diseño limpio (quizás pestañas, un menú lateral o un stepper).
Estética: Diseño limpio y corporativo usando Tailwind CSS y componentes de Shadcn UI (Card, RadioGroup, Button). Incluye una barra de progreso que refleje el avance.
Ahora voy a crear el formulario interactivo NOM-035. Primero actualizaré el tema para un diseño corporativo limpio, luego crearé los componentes necesarios.
He creado el formulario interactivo NOM-035 completo con las siguientes características:
Estructura del formulario:
.map()Componentes creados:
pregunta-card.tsx - Renderiza cada pregunta con botones de radio estilizadosseccion-formulario.tsx - Agrupa las preguntas por categoría con instruccionesstepper.tsx - Navegación visual entre seccionesformulario-nom035.tsx - Componente principal con lógica de estado y resultadosResultados: Al completar todas las preguntas, se muestra un resumen con el nivel de riesgo por categoría (Bajo, Medio, Alto, Muy Alto) y la interpretación según la norma.
You can send messages while the preview loads