From 9f45a40efffcd1dfa0dba78a64661508eb6edadd Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Thu, 23 Oct 2025 14:58:17 -0600
Subject: [PATCH] create new component call login

---
 src/app/page.tsx                         | 43 ++--------------
 src/app/styles/layout/BarNavigation.scss |  9 ----
 src/app/styles/layout/header.module.scss |  4 +-
 src/app/styles/layout/login.scss         |  2 +-
 src/components/BarNavigation.tsx         | 64 +-----------------------
 src/components/Login.tsx                 | 39 +++++++++++++++
 6 files changed, 47 insertions(+), 114 deletions(-)
 create mode 100644 src/components/Login.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 75ca3f1..dfc23c1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,40 +1,5 @@
-"use client"; // <-- OBLIGATORIO
+import Login from "@/components/Login";
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import "../app/styles/layout/login.scss";
-export default function Login() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-
-  const mockUsers = [
-    { email: "admin@escuela.com", password: "1234" },
-    { email: "usuario@escuela.com", password: "abcd" },
-  ];
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const user = mockUsers.find(u => u.email === email && u.password === password);
-
-    if (user) {
-      localStorage.setItem("loggedIn", "true");
-      router.push("/dashboard");
-    } else {
-      setError("Usuario o contraseña incorrectos");
-    }
-  };
-
-  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>
-  );
-}
\ No newline at end of file
+export default function page() {
+  return <Login />;
+}
diff --git a/src/app/styles/layout/BarNavigation.scss b/src/app/styles/layout/BarNavigation.scss
index dd3dc50..9afbbb3 100644
--- a/src/app/styles/layout/BarNavigation.scss
+++ b/src/app/styles/layout/BarNavigation.scss
@@ -24,10 +24,6 @@
   font-size: 1.5rem;
 }
 
-.barNavigation li:hover {
-  background-color: #bd8c01;
-}
-
 .barNavigation ul.active {
   display: flex;
   width: 100%;
@@ -109,11 +105,6 @@
   font-size: 1.5rem;
 }
 
-.subMenu:hover > span,
-.subMenu > a:hover > span {
-  color: white;
-}
-
 .containerLinks {
   padding: 0 !important;
   border-radius: 0 0 4px 4px;
diff --git a/src/app/styles/layout/header.module.scss b/src/app/styles/layout/header.module.scss
index 2f2d107..a180c45 100644
--- a/src/app/styles/layout/header.module.scss
+++ b/src/app/styles/layout/header.module.scss
@@ -45,7 +45,7 @@
 .header::after {
   content: "";
   top: 0;
-  left: -40px;
+  left: -60px;
   position: absolute;
   background-color: #003e79;
   height: 100%;
@@ -57,7 +57,7 @@
 .header::before {
   content: "";
   top: 0;
-  left: -20px;
+  left: -40px;
   position: absolute;
   background-color: rgb(1, 92, 184);
   height: 100%;
diff --git a/src/app/styles/layout/login.scss b/src/app/styles/layout/login.scss
index 70631b9..79be2d2 100644
--- a/src/app/styles/layout/login.scss
+++ b/src/app/styles/layout/login.scss
@@ -1,7 +1,7 @@
 .login-container {
   width: 300px;
   margin: 100px auto;
-  padding: 30px;
+  padding: 2rem;
   border: 1px solid #ccc;
   border-radius: 10px;
   background: #f8f9fa;
diff --git a/src/components/BarNavigation.tsx b/src/components/BarNavigation.tsx
index d87db01..83c2877 100644
--- a/src/components/BarNavigation.tsx
+++ b/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
\ No newline at end of file
+//IO
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
new file mode 100644
index 0000000..f226056
--- /dev/null
+++ b/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>
+  );
+}