fix react options, add component Taskfor #5

app/src/App.jsx

@@ -1,19 +1,8 @@
-// import React, { Component } from 'react';
-import React from "react"
+import Header from "./component/Header.jsx";
+import TaskForm from "./component/TaskForm.jsx";
 
-import Header from './component/Header.jsx'
-
-function App(){
-    return(<Header />)
+function App() {
+	return [<Header key='header' />, <TaskForm key='taskForm' />];
 }
 
-export default App
-
-// class App extends Component{
-//     constructor(){
-//         super()
-//     }
-//     render(){
-//         return(<Header />)
-//     }
-// }
+export default App;

app/src/component/Header.jsx

@@ -1,24 +1,12 @@
 // import React, { Component } from 'react';
-import React from "react"
-import "./Header.css"
+import "./Header.css";
 
-function Header(){
-    return(
-        <div className="Header">
-            <h1>TaskFlow</h1>
-        </div>
-    )
+function Header() {
+	return (
+		<div className='Header'>
+			<h1>TaskFlow</h1>
+		</div>
+	);
 }
 
-export default Header
-
-// class Header extends Component {
-//     constructor(){
-//         super()
-//     }
-//     render(){
-//         return(
-//             <div className="Header"><h1>To-Do</h1></div>
-//         )
-//     }
-// }
+export default Header;

app/src/component/TaskForm.css

@@ -0,0 +1,38 @@
+.TaskForm {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 40px;
+  color: dodgerblue;
+
+}
+
+.TaskForm>form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.TaskForm>form>input {
+  border-radius: 5px;
+  text-align: center;
+  width: 30rem;
+  height: 2rem;
+  color: dodgerblue;
+  font-size: 1.2rem;
+}
+
+.TaskForm>form>input::placeholder {
+  color: dodgerblue;
+}
+
+.TaskForm>form>button {
+  border-radius: 5px;
+  width: 10rem;
+  height: 2rem;
+  font-size: 1.2rem;
+  background-color: dodgerblue;
+  color: white;
+  cursor: pointer;
+}

app/src/component/TaskForm.jsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import "./TaskForm.css";
+
+function TaskForm(props) {
+	const [inputValue, setInputValue] = useState("");
+
+	const handleInputChange = (event) => {
+		setInputValue(event.target.value);
+	};
+
+	const checkForm = (event) => {
+		event.preventDefault();
+
+		const newTarea = {
+			id: Date.now(),
+			description: inputValue,
+			completed: false,
+		};
+
+		setInputValue("");
+
+		props.onSubmit(newTarea);
+	};
+
+	return (
+		<div className='TaskForm'>
+			<form onSubmit={checkForm}>
+				<input
+					id='newtask'
+					type='text'
+					placeholder='Escribe una nueva tarea'
+					value={inputValue}
+					onChange={handleInputChange}
+				></input>
+				<button type='submit'>Añadir Tarea</button>
+			</form>
+		</div>
+	);
+}
+
+export default TaskForm;

app/src/main.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './global.css'
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./global.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render([<App />])
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);