create view and components

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">
-      {" "}
-      <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 action="">
+      <label>Numero de equipo</label>
+
+      <input type="text" />
+      <button className="button buttonSearch">Buscar</button>
     </form>
   );
 }