Reformat code to have 4 indent for a tab

src/App.tsx

@@ -3,66 +3,66 @@ import './App.css';
 import Todo from "./Todo";
 
 interface TodoItem {
-  id: number;
+    id: number;
-  text: string;
+    text: string;
-  completed: boolean;
+    completed: boolean;
 }
 
 function App() {
-  const [todos, setTodos] = useState<TodoItem[]>([]);
+    const [todos, setTodos] = useState<TodoItem[]>([]);
-  const [text, setText] = useState("");
+    const [text, setText] = useState("");
 
-  const handleAddTodo = () => {
+    const handleAddTodo = () => {
-    if (text.trim() === "") return;
+        if (text.trim() === "") return;
-    const newTodo: TodoItem = {
+        const newTodo: TodoItem = {
-      id: todos.length + 1,
+            id: todos.length + 1,
-      text: text,
+            text: text,
-      completed: false,
+            completed: false,
-    };
+        };
 
-    setTodos([...todos, newTodo]);
+        setTodos([...todos, newTodo]);
-    setText("");
+        setText("");
-  }
+    }
 
-  const handleToggleTodo = (id: number) => {
+    const handleToggleTodo = (id: number) => {
-    const updatedTodos = todos.map((todo) => {
+        const updatedTodos = todos.map((todo) => {
-      if (todo.id === id) {
+            if (todo.id === id) {
-        return { ...todo, completed: !todo.completed };
+                return {...todo, completed: !todo.completed};
-      }
+            }
-      return todo;
+            return todo;
-    });
+        });
 
-    setTodos(updatedTodos);
+        setTodos(updatedTodos);
-  }
+    }
 
-  const handleDeleteTodo = (id: number) => {
+    const handleDeleteTodo = (id: number) => {
-    const updatedTodos = todos.filter((todo) => todo.id !== id);
+        const updatedTodos = todos.filter((todo) => todo.id !== id);
-    setTodos(updatedTodos);
+        setTodos(updatedTodos);
-  }
+    }
 
-  return (
+    return (
-      <div>
+        <div>
-        <h1>Todo List</h1>
+            <h1>Todo List</h1>
-        <input
+            <input
-          type="text"
+                type="text"
-          value={text}
+                value={text}
-          onChange={(e) => setText(e.target.value)}
+                onChange={(e) => setText(e.target.value)}
-        />
+            />
-        <button onClick={handleAddTodo}>Add Todo</button>
+            <button onClick={handleAddTodo}>Add Todo</button>
-        <ul>
+            <ul>
-          {todos.map((todo) => (
+                {todos.map((todo) => (
-              <Todo
+                    <Todo
-                  key={todo.id}
+                        key={todo.id}
-                  id={todo.id}
+                        id={todo.id}
-                  text={todo.text}
+                        text={todo.text}
-                  completed={todo.completed}
+                        completed={todo.completed}
-                  onToggle={handleToggleTodo}
+                        onToggle={handleToggleTodo}
-                  onDelete={handleDeleteTodo}
+                        onDelete={handleDeleteTodo}
-              />
+                    />
-          ))}
+                ))}
-        </ul>
+            </ul>
-      </div>
+        </div>
-  );
+    );
 }
 
 export default App;