IO420
109 lines
3.1 KiB
TypeScript
109 lines
3.1 KiB
TypeScript
// 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
|
|
}
|
|
|
|
// 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>{titulo}</label>
|
|
|
|
{/* Renderizamos UN solo <select> con varias <option> */}
|
|
<select>
|
|
{opcion.map((op, index) => (
|
|
<option key={index} value={op}>
|
|
{op}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
{/* 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>
|
|
</div>
|
|
|
|
<button className="button buttonSearch">Guardar cambios</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProgramSelector;
|