[Página] Crear pagina de ejercicios prácticos

[mvnueloc]

Descripción: Desarrollar una página donde puedas leer, resolver y mandar a revisión los problemas prácticos correspondientes a la categoría.

Tareas:

• [x] Crear Estructura Básica:

  • Definir la estructura HTML básica de la página de menú.

• [x] Implementar la Interfaz Información:

  • Titulo
  • Contenido
  • Dificultad
  • Crear cronometro funcional como el mostrado en el figma
  • Añadir los botones "necesito ayuda" y continuar, el botón de continuar debe mandarte a la siguiente pregunta.

• [x] Implementar la Interfaz de editor de código:

  • Usar la dependencia npm monaco-editor/react : (https://www.npmjs.com/package/@monaco-editor/react)
  • Implementar un botón con el que puedas seleccionar el lenguaje de programación, que sea dinámico y funcional en el editor de código

• [x] Implementar la interfaz de salida de codigo:

  • Crear el botón "ejecutar"
  • Verificar que haya contenido escrito en el editor de codigo
  • Si existe contenido mandar una petición post a la Api "Piston" con los parámetros necesarios. (https://piston.readthedocs.io/en/latest/api-v2/#execute)
  • Mostrar el contenido de la respuesta de la api en el lugar correspondiente (ver diseño)

• [x] Implementar la página según el diseño en Figma:

  • Respetar el estilo y los detalles del diseño en Figma.

• [x] Responsividad:

  • Asegurarse de que la página sea responsiva y se vea bien en diferentes dispositivos.

Figma:

Notas Adicionales:

• Considerar añadir una validación y los posibles errores que pueda tener el usuario final.