fix the types

components/Top-Level/Item/Item.tsx

@@ -4,17 +4,18 @@ import styles from './item.module.css'
 import Input from '@/components/base/input/Input';
 import closeIcon from '@/public/icons/red-x-10333.svg';
 import Image from 'next/image';
-import { TodoListItems } from '@/Types/todoTypes';
 
 
 interface ItemProps {
-    data: TodoListItems
+    id: number;
+    task: string;
+    isCompleted: boolean;
     onDelete: (id: number) => void;
     updateTask: (id: number, task: string, isCompleted: boolean) => void;
 }
 
-const Item: React.FC<ItemProps> = ({ onDelete, updateTask, data }) => {
-    const { id, task, isCompleted } = data;
+const Item: React.FC<ItemProps> = ({ onDelete, updateTask, id, isCompleted, task }) => {
+
     const [isChecked, setisChecked] = useState(isCompleted);
 
     useEffect(() => {

components/Top-Level/Item/item.stories.tsx

@@ -14,11 +14,11 @@ export default meta;
 type story = StoryObj<typeof meta>
 export const Item_: story = {
     args: {
-        data: {
+
         id: 1,
         isCompleted: true,
         task: 'Buy groceries'
-        }
+
     },
 }
 

components/layout/List/List.tsx

@@ -14,7 +14,7 @@ const ListItem: React.FC<ListItemProps> = ({ data, onDelete, updateTask }) => {
                     return (
                         <Item
                             key={item.id}
-                            data={item}
+                            {...item}
                             onDelete={onDelete}
                             updateTask={updateTask}
                         />

db.json

@@ -12,8 +12,13 @@
     },
     {
       "task": "sdf",
-      "isCompleted": false,
+      "isCompleted": true,
       "id": 7
+    },
+    {
+      "task": "new dev another",
+      "isCompleted": false,
+      "id": 8
     }
   ]
 }
\ No newline at end of file