Nuevas vistas y componentes
This commit is contained in:
@@ -17,6 +17,7 @@
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.barNavigation li:hover {
|
||||
@@ -65,7 +66,7 @@
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 61, 121, 1);
|
||||
transition: max-height 0.3s ease, opacity 0.3s ease;
|
||||
transition: color 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.subMenu.open ul {
|
||||
|
||||
@@ -9,8 +9,11 @@ function BarNavigation() {
|
||||
|
||||
const toggleMenu = () => setOpenMenu(!openMenu);
|
||||
const toggleSubMenu = (index: number) => {
|
||||
setOpenSubMenu(openSubMenu === index ? null : index);
|
||||
if (typeof window !== "undefined" && window.innerWidth <= 800) {
|
||||
setOpenSubMenu(openSubMenu === index ? null : index);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="barNavigation">
|
||||
<div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
// Definimos la interfaz de props
|
||||
interface EnviarMensajeProps {
|
||||
titulo: string;
|
||||
opciones: string[];
|
||||
}
|
||||
|
||||
const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
|
||||
const [seleccion, setSeleccion] = useState("");
|
||||
const [mensaje, setMensaje] = useState("");
|
||||
const [customMsg, setCustomMsg] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Aquí puedes manejar el envío (guardar en estado global, enviar a backend, etc.)
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="containerForm" onSubmit={handleSubmit}>
|
||||
{/* Selección principal */}
|
||||
<label className="label">{titulo}</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={seleccion}
|
||||
onChange={(e) => setSeleccion(e.target.value)}
|
||||
>
|
||||
<option value="">-- {titulo} --</option>
|
||||
{opciones.map((opt, idx) => (
|
||||
<option key={idx} value={opt}>
|
||||
{opt}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Selección de mensaje */}
|
||||
<label className="label">Seleccione el mensaje</label>
|
||||
<div className="groupInput">
|
||||
<select value={mensaje} onChange={(e) => setMensaje(e.target.value)}>
|
||||
<option value="">-- Seleccione el mensaje --</option>
|
||||
{[
|
||||
{ value: "cerrar", label: "No olvides cerrar sesión" },
|
||||
{ value: "alerta1", label: "⚠️ Atención" },
|
||||
{ value: "alerta2", label: "🔔 Aviso importante" },
|
||||
{ value: "alerta3", label: "✅ Confirmación" },
|
||||
].map((msg, idx) => (
|
||||
<option key={idx} value={msg.value}>
|
||||
{msg.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Mensaje personalizado */}
|
||||
<label className="label">Mensaje personalizado</label>
|
||||
<div className="groupInput">
|
||||
<input
|
||||
type="text"
|
||||
value={customMsg}
|
||||
onChange={(e) => setCustomMsg(e.target.value)}
|
||||
placeholder="Escribe tu mensaje..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Botón de enviar */}
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Mandar mensaje
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnviarMensaje;
|
||||
@@ -25,8 +25,8 @@
|
||||
content: "";
|
||||
top: 0;
|
||||
left: -20px;
|
||||
width: 30%;
|
||||
height: 50%;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
min-width: 300px;
|
||||
background-color: #d59f0f;
|
||||
transform: skew(-45deg);
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user