diff --git a/src/app/styles/layout/reporte.scss b/src/app/styles/layout/reporte.scss index 1413774..3adb15f 100644 --- a/src/app/styles/layout/reporte.scss +++ b/src/app/styles/layout/reporte.scss @@ -89,7 +89,7 @@ display: flex; flex-direction: column; gap: 10px; - justify-content: center; + justify-content: start; padding: 20px; background-color: #f5f5f7; diff --git a/src/components/Equipo_Computo/Pregunta2.tsx b/src/components/Equipo_Computo/Pregunta2.tsx index 3c78b86..706a083 100644 --- a/src/components/Equipo_Computo/Pregunta2.tsx +++ b/src/components/Equipo_Computo/Pregunta2.tsx @@ -55,6 +55,7 @@ function transformPlatform(raw: RawOsEntry[]): OsEntry[] { export default function Pregunta2() { const [activeTab, setActiveTab] = useState("pc-desktop"); const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); // ✔ GET AXIOS PROFESIONAL useEffect(() => { @@ -79,10 +80,41 @@ export default function Pregunta2() { setData(formatted); }) - .catch((err) => console.error("Error cargando datos", err)); + .catch((err) => console.error("Error cargando datos", err)) + .finally(() => { + setLoading(false); + }); }, []); - if (!data) return
Cargando datos...
; + if (loading) + return ( +
+
+ Censo de equipos de cómputo - Sitema Operativo +
+ +
+ Número de equipos de cómputo por cada categoría y perfil de usuario. + +
+
Cargando datos...
+
+ ); + + if (!data) + return ( +
+
+ Censo de equipos de cómputo - Sitema Operativo +
+ +
+ Número de equipos de cómputo por cada categoría y perfil de usuario. + +
+
Error al cargar los datos.
+
+ ); const currentData = data[activeTab]; diff --git a/src/components/Equipo_Computo/Pregunta2_1.tsx b/src/components/Equipo_Computo/Pregunta2_1.tsx index 1e15cd9..75f97eb 100644 --- a/src/components/Equipo_Computo/Pregunta2_1.tsx +++ b/src/components/Equipo_Computo/Pregunta2_1.tsx @@ -1,6 +1,5 @@ "use client"; -import React from "react"; import Link from "next/link"; import "./pregunta2_1.module.scss"; // 👈 Importamos los estilos diff --git a/src/components/Equipo_Computo/Pregunta3.tsx b/src/components/Equipo_Computo/Pregunta3.tsx index b7d5830..ac36e25 100644 --- a/src/components/Equipo_Computo/Pregunta3.tsx +++ b/src/components/Equipo_Computo/Pregunta3.tsx @@ -156,10 +156,32 @@ export default function Pregunta3_2() { }, []); if (loading) - return
Cargando datos...
; + return ( +
+
+ Censo de equipos de cómputo - Plataforma y tipo procesador +
+
+ Cantidad de población beneficiada por plataforma y tipo de procesador. + +
+
Cargando datos...
+
+ ); if (!data) - return
Error al cargar los datos.
; + return ( +
+
+ Censo de equipos de cómputo - Plataforma y tipo procesador +
+
+ Cantidad de población beneficiada por plataforma y tipo de procesador. + +
+
Error al cargar los datos.
+
+ ); const currentData = data[activeTab]; diff --git a/src/components/Equipo_Computo/pregunta2.module.scss b/src/components/Equipo_Computo/pregunta2.module.scss index 834b4ed..719d46e 100644 --- a/src/components/Equipo_Computo/pregunta2.module.scss +++ b/src/components/Equipo_Computo/pregunta2.module.scss @@ -34,6 +34,13 @@ gap: 10px; } +.scanView_P3 { + padding: 20px; + width: 100%; + background-color: white; + border-radius: 10px; +} + .scanView_P1 { background-color: #fff; border-radius: 10px;