103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect } from "react";
|
|
import "@/app/styles/layout/pregunta4EP.scss";
|
|
|
|
interface EquiposDigitalizacion {
|
|
digitalizadorCamaPlana: string;
|
|
digitalizador3d: string;
|
|
digitalizadorAlimentador: string;
|
|
digitalizadorGranVolumen: string;
|
|
}
|
|
|
|
export default function Pregunta4EP() {
|
|
const [equipos, setEquipos] = useState<EquiposDigitalizacion>({
|
|
digitalizadorCamaPlana: "27",
|
|
digitalizador3d: "",
|
|
digitalizadorAlimentador: "108",
|
|
digitalizadorGranVolumen: "1",
|
|
});
|
|
|
|
// 🔹 Preparado para conectar con el backend
|
|
useEffect(() => {
|
|
// Cuando tengas la API, descomenta y reemplaza la URL:
|
|
/*
|
|
fetch("https://tu-api-backend.com/api/equipos-digitalizacion")
|
|
.then((res) => res.json())
|
|
.then((data) => setEquipos(data))
|
|
.catch((err) => console.error("Error al obtener datos:", err));
|
|
*/
|
|
}, []);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setEquipos({
|
|
...equipos,
|
|
[name]: value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<div className="contenedor-censo">
|
|
Censo de equipos periféricos - Equipo de digitalización
|
|
</div>
|
|
|
|
<div className="pregunta-cuadro">
|
|
Número de equipos de digitalización.
|
|
</div>
|
|
|
|
<div className="grid">
|
|
<div className="item">
|
|
<label htmlFor="digitalizadorCamaPlana">
|
|
Digitalizador de cama plana para oficina
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="digitalizadorCamaPlana"
|
|
name="digitalizadorCamaPlana"
|
|
value={equipos.digitalizadorCamaPlana}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="item">
|
|
<label htmlFor="digitalizador3d">3D</label>
|
|
<input
|
|
type="text"
|
|
id="digitalizador3d"
|
|
name="digitalizador3d"
|
|
value={equipos.digitalizador3d}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="item">
|
|
<label htmlFor="digitalizadorAlimentador">
|
|
Digitalizador con alimentador de hojas para oficina
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="digitalizadorAlimentador"
|
|
name="digitalizadorAlimentador"
|
|
value={equipos.digitalizadorAlimentador}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="item">
|
|
<label htmlFor="digitalizadorGranVolumen">
|
|
Digitalizador de gran volumen
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="digitalizadorGranVolumen"
|
|
name="digitalizadorGranVolumen"
|
|
value={equipos.digitalizadorGranVolumen}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|