fix of the bugs

src/App.css

@@ -6,100 +6,125 @@
   background-color: ghostwhite;
 }
 
-body {
+
+#root {
   width: 100%;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  background: radial-gradient(circle, #b3b3b3 10%, transparent 11%), radial-gradient(circle at bottom left, #b3b3b3 5%, transparent 6%), radial-gradient(circle at bottom right, #b3b3b3 5%, transparent 6%), radial-gradient(circle at top left, #b3b3b3 5%, transparent 6%), radial-gradient(circle at top right, #b3b3b3 5%, transparent 6%);
+  background-size: 1em 1em;
+  background-color: #ffffff;
 }
 
 .Count-banner {
-  font-weight: 700;
-  font-size: 1.3rem;
-  flex-shrink: 1;
-  flex-grow: 1;
-  min-width: 70vh;
+  min-width: 30vw;
+  height: auto;
   padding: 1rem;
+  font-size: 1.3rem;
+  font-weight: 700;
   text-align: center;
+  box-shadow: 0px 2px 1px rgba(0, 0, 0, .20);
+  margin-bottom: 3px;
+}
+
+#root>* {
   background-color: white;
-  box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
-  border-radius: 5px;
+  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1), -3px -3px 1px rgba(0, 0, 0, 0.1);
 }
 
-img {
-  max-width: 100%;
-  height: auto;
-  object-fit: contain;
+.wrapper-list {
+  width: 100%;
+  max-height: 300px;
+
+  overflow-y: scroll;
+}
+
+.wrapper-list::-webkit-scrollbar {
+  display: none;
 }
 
 .item {
-  min-width: 100%;
-  height: 50px;
+  width: 100%;
+  height: 40px;
+  padding: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 2rem .8rem;
-  box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
-  background: white;
-}
 
-.item .item-content {
-  font-size: 20px;
-  padding: 0px 10px;
-  text-transform: capitalize;
-  background-color: transparent;
+  border-bottom: .3px solid rgb(189, 184, 184);
 }
 
-.item .item-content>* {
-  margin-inline-end: 5px;
+
+
+.item img {
+  width: 1.7rem;
+  margin-inline: .3rem;
 }
 
-.item .actions {
-  display: flex;
-  gap: 10px;
+.item .item-content>* {
+  font-size: 20px;
+  border: none;
+  margin-inline-end: 9px;
+  color: gray;
 }
 
-.item .actions img {
-  width: 20px;
-  height: 20px;
+.item .item-content input:nth-child(1) {
+  display: inline;
+  transform: scale(1.5);
+  border-color: black;
 }
 
-.todo-name {
+.item .item-content>input:focus {
   outline: none;
   border: none;
-  padding: 0rem 0;
-  font-size: 20px;
-  background-color: white;
 }
 
-.todo-name:focus {
-  border: none;
+.strike {
+  text-decoration: line-through;
 }
 
 .input-item {
   width: 100%;
-  background-color: white;
-  padding: 1.7rem;
-  box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
+  max-height: 100px;
+}
+
+.input-item form {
+  padding: 1.5rem .5rem;
+  max-height: 100%;
+}
+
+.input-item form>* {
+  border: 0.3px solid rgb(179, 172, 172);
+  outline: none;
+  padding: 15px 20px;
+  font-size: 16px;
 }
 
 .input-item form>input {
-  padding: .3rem 1rem;
-  border: .5px solid black;
-  background-color: white;
   width: 70%;
-  border-radius: 2px;
+  border-radius: 5px;
+  margin-inline: 20px;
+  box-shadow: inset rgb(173, 172, 172) 0px 0px 11px -5px;
 }
 
 .input-item form>button {
-  border: none;
-  padding: .4rem .6rem;
-  width: 20%;
-  color: white;
+  display: inline;
   border-radius: 3px;
-  background-color: black;
-  margin-inline-start: 10%;
-  box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
-  font-weight: 600;
+  width: 20%;
+}
+
+.item .actions .delete-img {
+  cursor: pointer;
+}
+
+.item.item:nth-last-child(-n+1) {
+  border-bottom: none;
+}
+
+.alert {
+  font-size: large;
+  text-align: center;
+  padding: 1rem;
 }
\ No newline at end of file

src/App.tsx

 
 import './App.css'
-import Todo from './Components/Todo'
+import Todo from './Pages/Todo'
 import Todos from './Context Api/Todos'
 
 function App() {
@@ -8,7 +8,9 @@ function App() {
   return (
     <>
       <Todos>
+        <div>
           <Todo />
+        </div>
       </Todos>
     </>
   )

src/Components/TodoList/Item.tsx

-import DeleteIcon from "/src/assets/trash-alt-svgrepo-com.svg";
 import WrongIcon from "/src/assets/wrong-svgrepo-com.svg";
 import TickIcon from "/src/assets/tick-circle-svgrepo-com.svg";
 import { todo } from '../../types.dt'
-import { useContext } from "react";
-import { Provider } from "../../Context Api/Todos";
 interface item extends todo {
     index: Number,
     handleDelete?: () => void
     handleUpdate: () => void
 }
-const Item = ({ name, index, completed, handleDelete, handleUpdate }: item) => {
+const Item = ({ name, index, completed, id, handleDelete, handleUpdate }: item) => {
     const handleClick = (e: React.ChangeEvent<HTMLImageElement>) => {
         // console.log(index)
-        handleDelete({ index })
+        handleDelete({ id })
     }
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         handleUpdate({ name: e.target.value, index })
@@ -21,18 +18,19 @@ const Item = ({ name, index, completed, handleDelete, handleUpdate }: item) => {
         console.log("handletick")
         handleUpdate({ index })
     }
+    console.log(name)
     return (
         <div className="item">
             <div className='item-content'>
                 <input type='checkbox' id={`item-${index}`} defaultChecked={completed} onChange={handleTick} />
-                <input className="todo-name" defaultValue={name} type="text" placeholder="Enter the Name of the List" onChange={handleChange} />
+                <input className={`${completed && "strike"}`} readOnly={completed} defaultValue={name} type="text" placeholder="Enter the Name of the List" onChange={handleChange} />
             </div>
             <div className='actions'>
                 {
                     !completed ? (
                         <>
-                            <img src={DeleteIcon} alt="delete" onClick={handleClick} />
-                            <img src={WrongIcon} alt="Not Done" />
+
+                            <img src={WrongIcon} alt="Not Done" onClick={handleClick} className="delete-img" />
                         </>
                     ) : (
 

src/Components/TodoList/List.tsx

@@ -3,16 +3,20 @@ import { todo } from '../../types.dt'
 import Item from './Item'
 
 const List = ({ Todo, handleDelete, handleUpdate }: { Todo: todo[], handleDelete: () => void, handleUpdate: () => void }) => {
+    console.log(Todo)
     return (
-        <>
+        <div className='wrapper-list'>
+            {
+                Todo.length === 0 && <h1 className='alert'>Nothing in this todo</h1>
+            }
             {
                 Todo.map((item, index) => {
                     return (
-                        <Item {...item} index={index} key={index} handleDelete={handleDelete} handleUpdate={handleUpdate} />
+                        <Item {...item} index={index} key={item.id} handleDelete={handleDelete} handleUpdate={handleUpdate} />
                     )
                 })
             }
-        </>
+        </div>
     )
 }
 

src/Context Api/Todos.tsx

@@ -8,8 +8,10 @@ const Todos = ({ children }: {
         switch (action.type) {
             case 'Create':
                 // console.log(action)
+
                 const set = new Set([...state, { id: state.length + 1, name: action.name, completed: false }])
                 const newstate = Array.from(set)
+                console.log(newstate)
                 return newstate;
             case "Update":
                 if (action.name) {
@@ -21,9 +23,10 @@ const Todos = ({ children }: {
                 }
                 return [...state];
             case "Delete":
-                return state.filter((data, i) => {
-                    return action.index !== i
-                })
+                console.log(action.index)
+                return [...state.filter((data, i) => {
+                    return action.id != data.id
+                })]
             default:
                 return state;
         }

src/Components/Todo.tsx → src/Pages/Todo.tsx

 import React, { useContext, useEffect, useState } from 'react'
 import { todo } from '../types.dt'
-import TodoCount from './TodoCount'
-import List from './TodoList/List'
+import TodoCount from '../Components/TodoCount'
+import List from '../Components/TodoList/List'
 import { Provider } from '../Context Api/Todos'
-import TodoCreate from './TodoCreate'
+import TodoCreate from '../Components/TodoCreate'
 const Todo = () => {
     const [Todos, setTodos] = useState<todo[]>([])
     const { state, handleCreate, handleDelete, handleUpdate } = useContext(Provider)

src/assets/tick-circle-svgrepo-com.svg

-
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="#000000"/><path d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z" fill="#000000"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#292D32"/>
+<path d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z" fill="white"/>
+</svg>
\ No newline at end of file

src/assets/wrong-svgrepo-com.svg

-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg viewBox="0 0 1024 1024" fill="#000000" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M332 663.2c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l349.6-356c9.6-9.6 9.6-25.6 0-35.2s-25.6-9.6-35.2 0L332 663.2z" fill="" /><path d="M681.6 698.4c9.6 9.6 25.6 9.6 35.2 0s9.6-25.6 0-35.2L367.2 307.2c-9.6-9.6-25.6-9.6-35.2 0s-9.6 25.6 0 35.2l349.6 356z" fill="" /><path d="M516.8 1014.4c-277.6 0-503.2-225.6-503.2-503.2S239.2 7.2 516.8 7.2s503.2 225.6 503.2 503.2-225.6 504-503.2 504z m0-959.2c-251.2 0-455.2 204.8-455.2 456s204 455.2 455.2 455.2 455.2-204 455.2-455.2-204-456-455.2-456z" fill="" /></svg>
\ No newline at end of file
+<svg fill="gray" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 511.76 511.76" xml:space="preserve">
+<g>
+	<g>
+		<path d="M436.896,74.869c-99.84-99.819-262.208-99.819-362.048,0c-99.797,99.819-99.797,262.229,0,362.048
+			c49.92,49.899,115.477,74.837,181.035,74.837s131.093-24.939,181.013-74.837C536.715,337.099,536.715,174.688,436.896,74.869z
+			 M361.461,331.317c8.341,8.341,8.341,21.824,0,30.165c-4.16,4.16-9.621,6.251-15.083,6.251c-5.461,0-10.923-2.091-15.083-6.251
+			l-75.413-75.435l-75.392,75.413c-4.181,4.16-9.643,6.251-15.083,6.251c-5.461,0-10.923-2.091-15.083-6.251
+			c-8.341-8.341-8.341-21.845,0-30.165l75.392-75.413l-75.413-75.413c-8.341-8.341-8.341-21.845,0-30.165
+			c8.32-8.341,21.824-8.341,30.165,0l75.413,75.413l75.413-75.413c8.341-8.341,21.824-8.341,30.165,0
+			c8.341,8.32,8.341,21.824,0,30.165l-75.413,75.413L361.461,331.317z"/>
+	</g>
+</g>
+</svg>
\ No newline at end of file