todolist11

import React, { useState } from 'react';
import { Layout, Row, Col, Input, Button, List, Checkbox, Typography, Modal, Form, Input as InputAnt, message, Space } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';

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

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

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

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

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Input
        placeholder="Add new task"
        value={newTodoText}
        onChange={handleInputChange}
        style={{ width: 'calc(100% - 80px)' }} // Adjust width for button
      />
      <Button type="primary" onClick={handleAddTodo} style={{ marginLeft: 8 }}>
        Add
      </Button>
    </div>
  );
};

// TodoList Component
const TodoList = ({ todos, onDeleteTodo, onToggleComplete, onEditTodo, filter, setFilter, onDeleteDone, onDeleteAll }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editingTodo, setEditingTodo] = useState(null);

  const handleEditTodo = (todo) => {
    setIsEditing(true);
    setEditingTodo(todo);
  };

  const handleCancelEdit = () => {
    setIsEditing(false);
    setEditingTodo(null);
  };

  const handleSaveEdit = (values) => {
    onEditTodo(editingTodo.id, values.text);
    setIsEditing(false);
    setEditingTodo(null);
  };

  const filteredTodos = filter === 'all'
    ? todos
    : filter === 'completed'
    ? todos.filter((todo) => todo.completed)
    : todos.filter((todo) => !todo.completed);

  return (
    <div>
      <Title level={3}>To-Do List</Title>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
        <Button onClick={() => setFilter('all')} type={filter === 'all' ? 'primary' : 'default'} style={{ backgroundColor: '#00a0e9', border: 'none', textAlign: 'left' }}>
          All
        </Button>
        <Button onClick={() => setFilter('completed')} type={filter === 'completed' ? 'primary' : 'default'} style={{ backgroundColor: '#00a0e9', border: 'none' }}>
          Completed
        </Button>
        <Button onClick={() => setFilter('active')} type={filter === 'active' ? 'primary' : 'default'} style={{ backgroundColor: '#00a0e9', border: 'none', textAlign: 'right' }}>
          Active
        </Button>
      </div>
      <List
        itemLayout="horizontal"
        dataSource={filteredTodos}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta
              title={
                <span style={{ textDecoration: item.completed ? 'line-through' : 'none' }}>
                  {item.text}
                </span>
              }
            />
            <Space>
              <Checkbox checked={item.completed} onChange={() => onToggleComplete(item.id)} />
              <Button type="primary" onClick={() => handleEditTodo(item)} icon={<EditOutlined />} />
              <Button type="danger" onClick={() => onDeleteTodo(item.id)} icon={<DeleteOutlined />} />
            </Space>
          </List.Item>
        )}
      />
      <Modal
        title="Edit Task"
        visible={isEditing}
        onCancel={handleCancelEdit}
        footer={[
          <Button key="back" onClick={handleCancelEdit}>
            Cancel
          </Button>,
          <Button key="submit" type="primary" onClick={() => handleSaveEdit}>
            Save
          </Button>,
        ]}
      >
        <Form
          name="edit-todo-form"
          initialValues={{ text: editingTodo ? editingTodo.text : '' }}
          onFinish={handleSaveEdit}
        >
          <Form.Item name="text" label="Task" rules={[{ required: true }]}>
            <InputAnt />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

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

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

  const handleDeleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const handleToggleComplete = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const handleEditTodo = (id, newText) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, text: newText } : todo
      )
    );
  };

  const handleDeleteDone = () => {
    setTodos(todos.filter((todo) => !todo.completed));
  };

  const handleDeleteAll = () => {
    setTodos([]);
  };

  return (
    <Layout style={{ maxWidth: '700px', margin: '0 auto' }}> {/* Add max-width and margin */}
      <Header style={{ padding: '0 24px' }}>
        <h1 style={{ color: 'white' }}>To-Do List</h1>
      </Header>
      <Content style={{ padding: '24px' }}>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <TodoInput onAddTodo={handleAddTodo} />
          </Col>
          <Col span={24}>
            <TodoList
              todos={todos}
              onDeleteTodo={handleDeleteTodo}
              onToggleComplete={handleToggleComplete}
              onEditTodo={handleEditTodo}
              filter={filter}
              setFilter={setFilter}
              onDeleteDone={handleDeleteDone}
              onDeleteAll={handleDeleteAll}
            />
          </Col>
        </Row>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        <Space>
          <Button type="danger" onClick={handleDeleteDone} style={{ backgroundColor: '#f5222d', border: 'none' }}>
            Delete done tasks
          </Button>
          <Button type="danger" onClick={handleDeleteAll} style={{ backgroundColor: '#f5222d', border: 'none' }}>
            Delete all tasks
          </Button>
        </Space>
      </Footer>
    </Layout>
  );
}

export default App;