create view and components

app/(private)/AsignacionEquipo/page.tsx

@@ -5,7 +5,10 @@ import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import { GetStudent } from "@/app/lib/getStudent";
 
 import "@/app/globals.css";
+import SearchBoxEquipo from "@/app/Components/SearchEquipo";
 import CheckBox from "@/app/Components/CheckBox";
+import CheckBoxEquipo from "@/app/Components/CheckBoxEquipo";
+import Information from "@/app/Components/Global/Information/information";
 
 export default async function Page(props: {
   searchParams?: Promise<{
@@ -60,7 +63,18 @@ export default async function Page(props: {
               <>
                 <SearchUser value={numAcount} />
 
-                {student && <h1>No hay records disponibles</h1>}
+                <Information
+                  numerocuenta={"12345"}
+                  nombre={"Carlos"}
+                  inscrito={"WINDOWS"}
+                  tiempo={"9minutos"}
+                  confirmo={"si/no"}
+                />
+                <label>Seleccionar tiempo</label>
+                <select name="" id=""></select>
+                <label>Seleccione un equipo</label>
+                <select name="" id=""></select>
+                <button className="button buttonSearch">Asignar Equipo</button>
               </>
             ),
           },
@@ -69,7 +83,7 @@ export default async function Page(props: {
             label: "Cancelar tiempo",
             content: (
               <>
-                <CheckBox />
+                <CheckBoxEquipo />
               </>
             ),
           },

app/(private)/AsignacionMesas/page.tsx

@@ -1,5 +1,6 @@
 import AsignacionMesas from "@/app/Components/AsignacionMesas";
 import CheckBox from "@/app/Components/CheckBox";
+import Information from "@/app/Components/Global/Information/information";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 
@@ -18,6 +19,12 @@ export default function Page() {
               <>
                 <SearchUser value={"3"} />
                 <AsignacionMesas />
+                <Information cuenta={"12345"} nombre={"Alberto"} />
+                <label>Tiempo</label>
+                <select name="" id="">
+                  <option value="1">Seleciona el tiempo </option>{" "}
+                </select>
+                <button className="button buttonSearch">Asignar</button>
               </>
             ),
           },

app/Components/AsignacionMesas.tsx

@@ -16,7 +16,7 @@ export default function AsignacionMesas() {
           <option value="120">20 </option>
         </select>
         <button className="button buttonSearch" type="submit">
-          Asignar
+          Actualizar
         </button>
       </div>
     </form>

app/Components/CheckBoxEquipo.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import SearchUser from "./Global/SearchUser/searchUser";
+import SearchBoxEquipo from "./SearchEquipo";
+
+export default function CheckBoxEquipo() {
+  const [Checkbox, setChecbox] = useState<string | null>(null);
+  return (
+    <>
+      <div className="checkbox-grid">
+        <label>
+          <input
+            type="checkbox"
+            onChange={() => setChecbox(Checkbox === "Equipo" ? null : "Equipo")}
+            checked={Checkbox === "Mesa"}
+          />{" "}
+          Equipo
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            onChange={() => setChecbox(Checkbox === "Cuenta" ? null : "Cuenta")}
+            checked={Checkbox === "Cuenta"}
+          />{" "}
+          Cuenta
+        </label>
+      </div>
+      {Checkbox === "Cuenta" ? <SearchUser value={"3"} /> : <></>}
+      {Checkbox === "Equipo" ? <SearchBoxEquipo /> : <></>}
+    </>
+  );
+}

app/Components/SearchEquipo.tsx

@@ -1,12 +1,11 @@
+"use client";
 export default function SearchEquipo() {
   return (
-    <form className="containerForm">
+    <form action="">
-      {" "}
+      <label>Numero de equipo</label>
-      <label>Numero de Equipo</label>
+
-      <div className="groupInput">
+      <input type="text" />
-        <input type="text" placeholder="Coloca el numero del Equipo" />
+      <button className="button buttonSearch">Buscar</button>
-        <button className="buttonSearch button">Buscar</button>
-      </div>
     </form>
   );
 }