➕ feat: tasks component

redux-example/src/App.css

@@ -40,3 +40,22 @@
 .read-the-docs {
   color: #888;
 }
+
+form {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+input {
+  outline: none;
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: none;
+}
+
+.tasks {
+  display: flex;
+  border: solid;
+  margin-top: 20px;
+}

redux-example/src/App.jsx

@@ -4,6 +4,7 @@ import "./App.css";
 import { useSelector, useDispatch } from "react-redux";
 import { increment, decrement, setValue } from "./app/slices/counterSlice";
 import Header from "./components/Header";
+import Tasks from "./components/Tasks";
 
 function App() {
   const counter = useSelector((state) => state.counter.value);
@@ -48,6 +49,7 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+      <Tasks />
     </>
   );
 }

redux-example/src/components/Tasks.jsx

@@ -0,0 +1,13 @@
+export default function Tasks() {
+  return (
+    <>
+      <form action="">
+        <input type="text" placeholder="Escribe tu tarea" />
+        <button>Crear Tarea</button>
+      </form>
+      <div className="tasks">
+        <p>Lista de tareas</p>
+      </div>
+    </>
+  );
+}