Nuevas vistas y componentes

app/Programas/page.tsx

@@ -1,23 +1,56 @@
+"use client";
+import { useState } from "react";
 import SearchUser from "../Components/SearchUser/searchUser";
-import "./programas.css";
+import styleprograms from "./programas.module.css";
 
 export default function Page() {
-  return (
-    <section className="containersection">
-      <h2 className="title"> PROGRAMAS </h2>
-      <label className="label">Programas</label>
-      <input
-        type="text"
-        //value={user}
-        //onChange={(e) => setUser(e.target.value)}
-        placeholder="Coloca "
-      />
-      <div className="margin">
-        <button className="button buttonSearch">Insertar</button>
+  const [Editar, setEditar] = useState(true);
 
-        <button className="button buttonSearch">Cancelar</button>
-      </div>
-    </section>
+  const handleEditar = () => {
+    setEditar(false);
+  };
+
+  return (
+    <>
+      {Editar ? (
+        <section className="containersection">
+          <h3 className="title"> ID </h3>
+          <label className="label">Programas</label>
+          <input
+            type="text"
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder="Coloca "
+          />
+          <div className="margin">
+            <button className="button buttonSearch" onClick={handleEditar}>
+              Editar
+            </button>
+            <button className={`button buttonSearch ${styleprograms.button}`}>
+              Nuevo
+            </button>
+          </div>
+        </section>
+      ) : (
+        <section className="containersection">
+          <div>ID</div>
+          <h2 className="title"> PROGRAMAS </h2>
+          <label className="label">Programas</label>
+          <input
+            type="text"
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder="Coloca "
+          />
+          <div className="margin">
+            <button className="button buttonSearch">Insertar</button>
+
+            <button className={`button buttonSearch ${styleprograms.button}`}>
+              Cancelar
+            </button>
+          </div>
+        </section>
+      )}
+    </>
   );
 }
-//IO

app/Programas/programas.module.css

@@ -7,3 +7,7 @@
 .margin {
   margin: 10px 10px;
 }
+.button {
+  margin-left: 20px;
+  margin-top: 20px;
+}