IO/front-AT
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Nuevas vistas y componentes

Browse Source
This commit is contained in:
Carlos Alberto Flores Reséndiz
2025-09-10 13:09:26 -06:00
parent 808af745eb 0242a7b968
commit f697092093
15 changed files with 407 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Components/ProgramSelector/ProgramSelector.tsx
+111 -94
View File
@@ -1,96 +1,113 @@
function ProgramSelector() {
return (
<div>
<form className="form-container">
<label htmlFor="equipo">Ubicación de equipo</label>
<select id="equipo">
<option value="">buscar</option>
<option value="sala1">Equipo 1</option>
<option value="sala2">Equipo 2</option>
<option value="sala3">Equipo 3</option>
</select>
<div className="checkbox-grid">
<label>
<input type="checkbox" /> 3D MAX STUDIO 2014
</label>
<label>
<input type="checkbox" /> ADOBE CREATIVE SUITE
</label>
<label>
<input type="checkbox" /> ARCHICAD 20
</label>
<label>
<input type="checkbox" /> AUDACITY - win - 2.0
</label>
<label>
<input type="checkbox" /> AUTOCAD
</label>
<label>
<input type="checkbox" /> CODE-BLOCKS
</label>
<label>
<input type="checkbox" /> COREL DRAW
</label>
<label>
<input type="checkbox" /> DEV-C++
</label>
<label>
<input type="checkbox" /> EVIEWS Enterprise
</label>
<label>
<input type="checkbox" /> Google Earth
</label>
<label>
<input type="checkbox" /> INTERNET
</label>
<label>
<input type="checkbox" /> MAPLE
</label>
<label>
<input type="checkbox" /> MATHEMATICA
</label>
<label>
<input type="checkbox" /> MATLAB
</label>
<label>
<input type="checkbox" /> Maxima
</label>
<label>
<input type="checkbox" /> miktex
</label>
<label>
<input type="checkbox" /> NETBEANS
</label>
<label>
<input type="checkbox" /> OFFICE 2016
</label>
<label>
<input type="checkbox" /> PSeInt
</label>
<label>
<input type="checkbox" /> R 3.0.1
</label>
<label>
<input type="checkbox" /> RStudio
</label>
<label>
<input type="checkbox" /> SPSS Statistics
</label>
<label>
<input type="checkbox" /> STATA 13
</label>
<label>
<input type="checkbox" /> STATGRAPHICS Centurion XVI
</label>
</div>
<button className="button buttonSearch">Guardar cambios</button>
</form>
</div>
)
// 1. Definimos la interfaz que describe las props del componente
export interface DatosEquipo {
titulo: string; // El título que aparecerá como label
opcion: string[]; // Lista de opciones para el select
}
export default ProgramSelector
// 2. Ya no necesitas tener "DatosOpciones" dentro de este archivo
// porque el componente debe ser reutilizable, no fijo.
// 3. Recibimos las props como un objeto con estructura DatosEquipo
function ProgramSelector({ titulo, opcion }: DatosEquipo) {
return (
<div>
<form className="form-container">
{/* Label dinámico con el título que recibimos */}
<label htmlFor="equipo">{titulo}</label>
{/* Renderizamos UN solo <select> con varias <option> */}
<select id="equipo">
{opcion.map((op, index) => (
<option key={index} value={op}>
{op}
</option>
))}
</select>
{/* Aquí puedes poner más <option> fijas si quieres */}
<option value="">Buscar</option>
{/* Lista de checkboxes (esto lo podrías optimizar igual con .map) */}
<div className="checkbox-grid">
<label>
<input type="checkbox" /> 3D MAX STUDIO 2014
</label>
<label>
<input type="checkbox" /> ADOBE CREATIVE SUITE
</label>
<label>
<input type="checkbox" /> ARCHICAD 20
</label>
<label>
<input type="checkbox" /> AUDACITY -win - 2.0
</label>
<label>
<input type="checkbox" /> AUTOCAD
</label>
<label>
<input type="checkbox" /> CODE-BLOCKS
</label>
<label>
<input type="checkbox" /> COREL DRAW
</label>{" "}
<label>
<input type="checkbox" /> DEV-C++
</label>{" "}
<label>
<input type="checkbox" /> EVIEWS Enterprise
</label>{" "}
<label>
<input type="checkbox" /> Google Earth
</label>{" "}
<label>
<input type="checkbox" /> INTERNERT
</label>{" "}
<label>
<input type="checkbox" /> MAPLE
</label>
<label>
<input type="checkbox" /> MATHEMATICA
</label>{" "}
<label>
<input type="checkbox" /> MATLAB
</label>{" "}
<label>
<input type="checkbox" /> Maxima
</label>{" "}
<label>
<input type="checkbox" /> miktex
</label>{" "}
<label>
<input type="checkbox" /> NETBEANS
</label>{" "}
<label>
<input type="checkbox" /> OFFICE 2016
</label>{" "}
<label>
<input type="checkbox" /> PSeint
</label>{" "}
<label>
<input type="checkbox" /> R 3.0.1
</label>{" "}
<label>
<input type="checkbox" /> R Studio
</label>{" "}
<label>
<input type="checkbox" /> SPPS Statiscs
</label>{" "}
<label>
<input type="checkbox" /> STATA 13
</label>{" "}
<label>
<input type="checkbox" /> STATGRAOHICS Centurion XVI
</label>
{/* ... resto de checkboxes */}
</div>
<button className="button buttonSearch">Guardar cambios</button>
</form>
</div>
);
}
export default ProgramSelector;