➕ feat: TextField

linder3hs · Apr 19, 2024 · 2f8fa66 · 2f8fa66
1 parent 704f6c7
commit 2f8fa66
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 36 deletions.
diff --git a/semana-9/todolist/src/components/TextField/index.jsx b/semana-9/todolist/src/components/TextField/index.jsx
@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+export default function TextField(props) {
+  const { type, name, value, onChange, placeholder } = props;
+
+  return (
+    <div className="my-5">
+      <input
+        type={type}
+        name={name}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className="px-3 py-2 rounded-md border outline-none w-full"
+      />
+    </div>
+  );
+}
diff --git a/semana-9/todolist/src/components/index.js b/semana-9/todolist/src/components/index.js
@@ -3,3 +3,4 @@ export { default as Modal } from "./Modal";
 export { default as UpdateForm } from "./UpdateForm";
 export { default as DeleteForm } from "./DeleteForm";
 export { default as CheckForm } from "./CheckForm";
+export { default as TextField } from "./TextField";
diff --git a/semana-9/todolist/src/pages/Login/index.jsx b/semana-9/todolist/src/pages/Login/index.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { createUser } from "../../services/firebase";
 import { Link } from "react-router-dom";
+import { TextField } from "../../components";
 
 export default function Login() {
   const [values, setValues] = useState({
@@ -29,26 +30,20 @@ export default function Login() {
             <h2 className="text-center text-2xl font-bold">👋 Hola de nuevo</h2>
           </div>
           <form className="my-5" onSubmit={handleSubmit}>
-            <div className="my-5">
-              <input
-                type="email"
-                name="email"
-                value={values.email}
-                onChange={handleInputChange}
-                placeholder="Ingrese su correo"
-                className="px-3 py-2 rounded-md border outline-none w-full"
-              />
-            </div>
-            <div className="my-5">
-              <input
-                type="password"
-                name="password"
-                value={values.password}
-                onChange={handleInputChange}
-                placeholder="Ingrese su password"
-                className="px-3 py-2 rounded-md border outline-none w-full"
-              />
-            </div>
+            <TextField
+              type="email"
+              name="email"
+              value={values.email}
+              onChange={handleInputChange}
+              placeholder="Ingrese su correo"
+            />
+            <TextField
+              type="password"
+              name="password"
+              value={values.password}
+              onChange={handleInputChange}
+              placeholder="Ingrese su password"
+            />
             <div className="my-5">
               <button
                 className="border border-green-400 text-black font-bold w-full px-3 py-2 rounded-md

diff --git a/semana-9/todolist/src/pages/SignUp/index.jsx b/semana-9/todolist/src/pages/SignUp/index.jsx
@@ -1,3 +1,5 @@
+import { TextField } from "../../components";
+
 export default function SignUp() {
   return (
     <>
@@ -7,22 +9,22 @@ export default function SignUp() {
             <h2 className="text-center text-2xl font-bold">🤗 Bienvenido</h2>
           </div>
           <form className="my-5">
-            <div className="my-5">
-              <input
-                type="email"
-                name="email"
-                placeholder="Ingrese su correo"
-                className="px-3 py-2 rounded-md border outline-none w-full"
-              />
-            </div>
-            <div className="my-5">
-              <input
-                type="password"
-                name="password"
-                placeholder="Ingrese su password"
-                className="px-3 py-2 rounded-md border outline-none w-full"
-              />
-            </div>
+            <TextField
+              type="text"
+              name="fullName"
+              placeholder="Ingrese su nombre completo"
+            />
+            <TextField
+              type="email"
+              name="email"
+              placeholder="Ingrese su correo"
+            />
+            <TextField
+              type="password"
+              name="password"
+              placeholder="Ingrese su password"
+            />
+
             <div className="my-5">
               <button
                 className="border border-green-400 text-black font-bold w-full px-3 py-2 rounded-md