i create TodoItems.js, add ToDo.png and ToDo2.png

and do the code to show de ads.
dembar · Feb 2, 2024 · 79bc751 · 79bc751
1 parent 5cb361e
commit 79bc751
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 5 deletions.
diff --git a/public/ToDo.png b/public/ToDo.png
diff --git a/public/ToDo2.png b/public/ToDo2.png
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,9 @@
 import { TodoCounter } from './TodoCounter';
 import { TodoSearch } from './TodoSearch';
 import { TodoList } from './TodoList';
+import { TodoLista } from './TodoLista';
 import { TodoItem } from './TodoItem';
+import { TodoItems } from './TodoItems';
 import { CreateTodoButton } from './CreateTodoButton';
 import React from 'react';
 
@@ -12,6 +14,18 @@ const defaultTodos = [
   {text: 'Cortar cilantro', completed: false},
 ]
 
+const myTodos = [
+  {name:'Task1', state: 'ToDo'},
+  {name:'Task2', state: 'onGoing'},
+  {name:'Task3', state: 'Completed'},
+  {name:'Task4', state: 'ToDo'},
+  {name:'Task5', state: 'onGoing'},
+  {name:'Task6', state: 'ToDo'},
+  {name:'Task7', state: 'Completed'},
+  {name:'Task8', state: 'onGoing'},
+  {name:'Task9', state: 'Completed'},
+]
+
 function App() {
   const [todos, setTodos] = React.useState(defaultTodos);
   const [searchValue, setSearchValue] = React.useState('');
@@ -43,11 +57,11 @@ function App() {
 
   return (
     <>
-      <TodoCounter 
+{/*       <TodoCounter 
         completed = {completedTodos}
         total = {totalTodos}
         />
-      <TodoSearch 
+       <TodoSearch 
         searchValue={searchValue}
         setSearchValue={setSearchValue}
       />
@@ -61,8 +75,17 @@ function App() {
           onDelete={() => deleteTodo(todo.text)}
           />
         ))}
-      </TodoList>
+      </TodoList> */}
       <CreateTodoButton />
+        <TodoItems
+         UrlImage='/ToDo.png'
+         Description='Discover the efficiency of our ToDo table on TashHhub. Organize your tasks with ease: "ToDo" for pending, 
+         "InProgress" for current and "Complete" for wins. Manage your project effectively with us! 🚀 #SimpleOrganization #ImparableProductivity.'/>
+        <TodoItems 
+          UrlImage='/ToDo2.png'
+          Description='Experience the power of ultimate customization with our ToDo solution! Tailor your task management experience to fit your unique style.
+           From personalized categories to flexible priority settings, take control of your productivity like never before. Embrace efficiency with
+            a ToDo platform that adapts to your needs seamlessly. Your tasks, your way. Start customizing today!'/>
     </>
   );
 }

diff --git a/src/TodoItem.js b/src/TodoItem.js
@@ -1,5 +1,5 @@
 import './TodoItem.css'
-import { AiFillAlert } from "react-icons/ai";
+// import { AiFillAlert } from "react-icons/ai";
 
 function TodoItem(props){
     return (
@@ -8,7 +8,7 @@ function TodoItem(props){
           onClick={props.onComplete}
           className = {`Icon Icon-check ${props.completed && "Icon-check--active"}`}></span> */}
 
-        <AiFillAlert />
+        {/*<AiFillAlert />*/}
         <p className = {`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}</p>
         <span 
           onClick={props.onDelete}

diff --git a/src/TodoItems.css b/src/TodoItems.css
@@ -0,0 +1,22 @@
+.todoImage{
+    max-width: 25%;
+    height: auto;
+    padding: 10px;
+    position: relative;
+}
+.ContainerFirstAdd{
+    background-color: #FAFAFA;
+    border-radius: 15px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 24px;
+    box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.15);
+    max-width: 50%;
+    height: auto;
+}
+p{
+    padding: 10px;
+    font-size: 80%;
+}
diff --git a/src/TodoItems.js b/src/TodoItems.js
@@ -0,0 +1,14 @@
+//import './TodoItem.css'
+import './TodoItems.css'
+import React from 'react';
+
+function TodoItems(props){
+  return (
+    <div className='ContainerFirstAdd'>
+    {/* <img src= "/ToDo.png" alt="insert text" className='todoImage'/> */}
+    <img src= {props.UrlImage} alt="insert text" className='todoImage'/>
+    <p>{props.Description}</p>
+    </div>);
+  }
+
+  export {TodoItems}
diff --git a/src/TodoLista.js b/src/TodoLista.js
@@ -0,0 +1,10 @@
+import './TodoList.css'
+function TodoLista({children}){
+    return (
+      <ul className = "TodoList">
+        {children}
+      </ul>
+    );
+  }
+
+  export { TodoLista };