componentes

app/(private)/AsignacionEquipo/page.tsx

@@ -4,7 +4,8 @@ import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import { GetStudent } from "@/app/lib/getStudent";
 
-import '@/app/globals.css'
+import "@/app/globals.css";
+import CheckBox from "@/app/Components/CheckBox";
 
 export default async function Page(props: {
   searchParams?: Promise<{
@@ -68,16 +69,7 @@ export default async function Page(props: {
             label: "Cancelar tiempo",
             content: (
               <>
-                <div className="checkbox-grid">
+                <CheckBox />
-                  <label>
-                    <input type="checkbox" /> Equipo
-                  </label>
-                  <label>
-                    <input type="checkbox" /> Cuenta
-                  </label>
-                </div>
-
-                <SearchUser value={numAcount} />
               </>
             ),
           },

app/(private)/AsignacionMesas/page.tsx

@@ -1,11 +1,9 @@
-"use client";
+import AsignacionMesas from "@/app/Components/AsignacionMesas";
+import CheckBox from "@/app/Components/CheckBox";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import { useState } from "react";
 
 export default function Page() {
-  const [tiempo, setTiempo] = useState("");
-
   return (
     <section className="containerSection">
       <h2 className="title"> ASIGNACION DE MESAS </h2>
@@ -19,27 +17,7 @@ export default function Page() {
             content: (
               <>
                 <SearchUser value={"3"} />
-
+                <AsignacionMesas />
-                <form className="containerForm">
-                  <label className="label">Mesas disponibles</label>
-                  <div className="groupInput">
-                    <select
-                      value={tiempo}
-                      onChange={(e) => setTiempo(e.target.value)}
-                    >
-                      <option value="">-- Mesas disponibles --</option>
-                      <option value="15">1 </option>
-                      <option value="30">3 </option>
-                      <option value="45">4 </option>
-                      <option value="60">22 </option>
-                      <option value="90">15 </option>
-                      <option value="120">20 </option>
-                    </select>
-                    <button className="button buttonSearch" type="submit">
-                      Asignar
-                    </button>
-                  </div>
-                </form>
               </>
             ),
           },
@@ -48,15 +26,7 @@ export default function Page() {
             label: "Liberar mesa",
             content: (
               <>
-                <div className="checkbox-grid">
+                <CheckBox />
-                  <label>
-                    <input type="checkbox" /> Mesa
-                  </label>
-                  <label>
-                    <input type="checkbox" /> Cuenta
-                  </label>
-                </div>
-                <SearchUser value={"3"} />
               </>
             ),
           },

app/Components/AsignacionMesas.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { SetStateAction, useState } from "react";
+export default function AsignacionMesas() {
+  const [tiempo, setTiempo] = useState("");
+  return (
+    <form className="containerForm">
+      <label className="label">Mesas disponibles</label>
+      <div className="groupInput">
+        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+          <option value="">-- Mesas disponibles --</option>
+          <option value="15">1 </option>
+          <option value="30">3 </option>
+          <option value="45">4 </option>
+          <option value="60">22 </option>
+          <option value="90">15 </option>
+          <option value="120">20 </option>
+        </select>
+        <button className="button buttonSearch" type="submit">
+          Asignar
+        </button>
+      </div>
+    </form>
+  );
+}

app/Components/CheckBox.tsx

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

app/Components/SearchEquipo.tsx

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

app/Components/SearchTable.tsx

@@ -0,0 +1,12 @@
+export default function SearchTable() {
+  return (
+    <form className="containerForm">
+      {" "}
+      <label>Numero de Mesa</label>
+      <div className="groupInput">
+        <input type="text" placeholder="Coloca el numero de Mesa" />
+        <button className="buttonSearch button">Buscar</button>
+      </div>
+    </form>
+  );
+}