Spaces:
Sleeping
Sleeping
File size: 4,090 Bytes
0a5a75e 3ef08c5 0a5a75e 12f1414 0a5a75e 12f1414 3ef08c5 0a5a75e 12f1414 3ef08c5 0a5a75e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | import React from "react";
import { registrarPost } from "../lib/conexionApi";
const Modal = ({
openModal,
setOpenModal,
nombresYApellidos,
setNombresYApellidos,
edad,
setEdad,
telefono,
setTelefono,
direccion,
setDireccion,
setError,
setClienteBusqueda
}) => {
return (
<div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
<div className="bg-white p-5 w-1/3 shadow-md rounded-lg">
<form>
<h3 className="text-center text-3xl text-bold mb-8">
Agregar nuevo cliente
</h3>
<div className="">
<label htmlFor="nombresYApellidos" className="block">
Nombres y apellidos
</label>
<input
type="text"
id="nombresYApellidos"
className="block w-full border p-2 rounded-md"
placeholder="Ej. Juan Perez"
onChange={(e) => setNombresYApellidos(e.target.value)}
value={nombresYApellidos}
/>
</div>
<div className="flex flex-row gap-3 my-3">
<div className="w-1/2">
<label htmlFor="edad" className="block">
Edad
</label>
<input
type="number"
id="edad"
className="block w-full border p-2 rounded-md"
placeholder="Ej. 40"
onChange={(e) => setEdad(e.target.value)}
value={edad}
/>
</div>
<div className="w-1/2">
<label htmlFor="telefono" className="">
Telefono
</label>
<input
type="text"
id="telefono"
className="block w-full border p-2 rounded-md"
placeholder="Ej. 999888777"
onChange={(e) => setTelefono(e.target.value)}
value={telefono}
/>
</div>
</div>
<div>
<label htmlFor="direccion" className="">
Direccion
</label>
<input
type="text"
id="direccion"
className="block w-full border p-2 rounded-md"
placeholder="Ej. Calle 123"
onChange={(e) => setDireccion(e.target.value)}
value={direccion}
/>
</div>
<div>
<div>
<button
type="submit"
className="cursor-pointer py-2 w-full bg-slate-700 hover:bg-slate-800 text-white font-semibold text-center rounded-md mt-5"
onClick={(e) => {
e.preventDefault();
const nuevoCliente = {
nombres_y_apellidos: nombresYApellidos,
edad: edad,
telefono: telefono,
direccion: direccion,
};
registrarPost("clientes", nuevoCliente);
setOpenModal(false);
setNombresYApellidos("");
setEdad("");
setTelefono("");
setDireccion("");
setError(false);
setClienteBusqueda("");
}}
>
Agregar cliente
</button>
</div>
<div>
<button
className="cursor-pointer py-2 w-full bg-slate-300 hover:bg-slate-400 text-gray-700 font-semibold text-center rounded-md mt-2"
onClick={(e) => {
e.preventDefault();
setOpenModal(false);
setNombresYApellidos("");
setEdad("");
setTelefono("");
setDireccion("");
setClienteBusqueda("");
}}
>
Cancelar
</button>
</div>
</div>
</form>
</div>
</div>
);
};
export default Modal;
|