From df09df4a3d50192efd8119dbb9d702a8adc5827f Mon Sep 17 00:00:00 2001
From: Linder Hassinger <linder@peppermint.pe>
Date: Thu, 2 May 2024 20:36:21 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20feat:=20tasks=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 redux-example/src/App.css              | 19 +++++++++++++++++++
 redux-example/src/App.jsx              |  2 ++
 redux-example/src/components/Tasks.jsx | 13 +++++++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 redux-example/src/components/Tasks.jsx

diff --git a/redux-example/src/App.css b/redux-example/src/App.css
index b9d355d..32455c0 100644
--- a/redux-example/src/App.css
+++ b/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;
+}
diff --git a/redux-example/src/App.jsx b/redux-example/src/App.jsx
index c594298..3af8ec3 100644
--- a/redux-example/src/App.jsx
+++ b/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 />
     </>
   );
 }
diff --git a/redux-example/src/components/Tasks.jsx b/redux-example/src/components/Tasks.jsx
new file mode 100644
index 0000000..282e92f
--- /dev/null
+++ b/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>
+    </>
+  );
+}