todolist3

import React, { useState } from 'react';
import { Layout, Row, Col, Input, Button, List, Checkbox, Typography } from 'antd';

const { Header, Content } = Layout;
const { Title } = Typography;

// TodoInput Component
const TodoInput = ({ onAddTodo }) => {
  const [newTodoText, setNewTodoText] = useState('');

  const handleInputChange = (e) => {
    setNewTodoText(e.target.value);
  };

  const handleSubmit = () => {
    if (newTodoText.trim() !== '') {
      onAddTodo({
        text: newTodoText.trim(),
        completed: false,
      });
      setNewTodoText('');
    }
  };

  return (
    <div>
      <Input.Group compact>
        <Input
          placeholder="Add new task"
          value={newTodoText}
          onChange={handleInputChange}
        />
        <Button type="primary" onClick={handleSubmit}>
          Add
        </Button>
      </Input.Group>
    </div>
  );
};

// TodoList Component
const TodoList = ({ todos, onDeleteTodo, onToggleComplete }) => {
  return (
    <div>
      <Title level={3}>To-Do List</Title>
      <List
        itemLayout="horizontal"
        dataSource={todos}
        renderItem={(item, index) => (
          <List.Item actions={[
            <Button type="primary" onClick={() => onDeleteTodo(index)}>
              Delete
            </Button>,
          ]}>
            <List.Item.Meta
              title={
                <Checkbox
                  checked={item.completed}
                  onChange={() => onToggleComplete(index)}
                >
                  {item.text}
                </Checkbox>
              }
            />
          </List.Item>
        )}
      />
    </div>
  );
};

// App Component
function App() {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = (newTodo) => {
    setTodos([...todos, newTodo]);
  };

  const handleDeleteTodo = (index) => {
    const updatedTodos = [...todos];
    updatedTodos.splice(index, 1);
    setTodos(updatedTodos);
  };

  const handleToggleComplete = (index) => {
    const updatedTodos = [...todos];
    updatedTodos[index].completed = !updatedTodos[index].completed;
    setTodos(updatedTodos);
  };

  return (
    <Layout>
      <Header style={{ padding: '0 24px' }}>
        <h1 style={{ color: 'white' }}>To-Do List</h1>
      </Header>
      <Content style={{ padding: '24px' }}>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <TodoInput onAddTodo={handleAddTodo} />
          </Col>
          <Col span={12}>
            <TodoList
              todos={todos}
              onDeleteTodo={handleDeleteTodo}
              onToggleComplete={handleToggleComplete}
            />
          </Col>
        </Row>
      </Content>
    </Layout>
  );
}

  return (
    <Layout>
      <Header style={{ padding: '0 24px' }}>
        <h1 style={{ color: 'white' }}>To-Do List</h1>
      </Header>
      <Content style={{ padding: '24px' }}>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <TodoInput onAddTodo={handleAddTodo} />
          </Col>
          <Col span={12}>
            <TodoList
              todos={todos}
              onDeleteTodo={handleDeleteTodo}
              onToggleComplete={handleToggleComplete}
            />
          </Col>
        </Row>
      </Content>
    </Layout>
  );
}


export default App;