create new component call login

src/components/BarNavigation.tsx

@@ -23,68 +23,6 @@ function BarNavigation() {
       </div>
 
       <ul className={openMenu ? "active" : ""}>
-        <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(0)}>Inscripciónes</span>
-          <ul className="containerLinks" onClick={toggleMenu}>
-            <Link href="/AgregarTiempo" className="links">
-              <li>Agregar Tiempo</li>
-            </Link>
-            <Link href="/Inscripcion" className="links">
-              <li>Inscripción Usuario</li>
-            </Link>
-          </ul>
-        </li>
-
-        <li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(1)}>Servicios</span>
-          <ul onClick={toggleMenu}>
-            <Link href="/Impresiones" className="links">
-              <li>Impresiones y Ploteo</li>
-            </Link>
-            <Link href="/AsignacionMesas" className="links">
-              <li>Asignacion de Mesas</li>
-            </Link>
-            <Link href="/AsignacionEquipo" className="links">
-              <li>Asignacion de Equipos</li>
-            </Link>
-            <Link href="/Monitor" className="links">
-              <li>Monitor</li>
-            </Link>
-          </ul>
-        </li>
-
-        <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(2)}>Equipo</span>
-          <ul onClick={toggleMenu}>
-            <Link href="/InformacionEquipo" className="links">
-              <li>Informacion de Equipos</li>
-            </Link>
-            <Link href="/ActivosMantenimiento" className="links">
-              <li>Activos y en Mantenimiento</li>
-            </Link>
-            <Link href="/Mensajes" className="links">
-              <li>Mensajes</li>
-            </Link>
-            <Link href="/Programas" className="links">
-              <li>Programas</li>
-            </Link>
-          </ul>
-        </li>
-
-        <li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(3)}>Reportes</span>
-          <ul onClick={toggleMenu}>
-            <Link href="/Reportes" className="links">
-              <li>Reportes</li>
-            </Link>
-            <Link href="/Inscritos" className="links">
-              <li>Inscritos</li>
-            </Link>
-            <Link href="/BitacoraSanciones" className="links">
-              <li>Bitacora y sanciones</li>
-            </Link>
-          </ul>
-        </li>
         <li className="subMenu" onClick={toggleMenu}>
           <Link href="/QuitarSancion" className="links">
             <span>Quitar sanción</span>
@@ -101,4 +39,4 @@ function BarNavigation() {
 }
 
 export default BarNavigation;
-//IO
+//IO

src/components/Login.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+
+import "../app/styles/layout/login.scss";
+
+export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div className="login-container">
+      <h2>Iniciar sesión</h2>
+      {error && <p className="error">{error}</p>}
+      <form onSubmit={handleSubmit}>
+        <input
+          type="email"
+          placeholder="Correo"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <input
+          type="password"
+          placeholder="Contraseña"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+        <button type="submit">Ingresar</button>
+      </form>
+    </div>
+  );
+}