Todo.jsx          → کامپوننت اصلی + input افزودن تسک
TodoList.jsx      → لیست تسک‌ها
TodoItem.jsx      → هر آیتم + checkbox + دکمه‌ها
EditTodo.jsx      → آیکون ویرایش (SVG)
DelTodo.jsx       → آیکون حذف (SVG)

import styled from "styled-components";
import TodoList from "./TodoList";

const MainDiv = styled.div`
  background-color: #fff;
  padding: 12px;
  border-radius: 18px;
  border: solid #7400ba 2px;
`;

const Title = styled.h1`
  color: #7400ba;
  font-weight: bold;
`;

const AddInput = styled.input`
  width: -webkit-fill-available;
  padding: 12px;
  background-color: #ffffff00;
  border: solid #7400ba 0.5px;
  border-radius: 6px;
  color: #0b0b0b;
`;

export default function Todo() {
  return (
    <MainDiv>
      <div>
        <Title>To-Do Project | MiPiboy Academy</Title>
        <AddInput type="text" placeholder="What needs to be done today?" />
        <TodoList />
      </div>
    </MainDiv>
  );
}

import styled from "styled-components";
import TodoItem from "./TodoItem";

const List = styled.ul`
  margin-block-end: 0.25rem;
  padding: 0;
`;

export default function TodoList() {
  return (
    <List>
      <TodoItem />
      <TodoItem />
      <TodoItem />
    </List>
  );
}

import styled from "styled-components";
import DelTodo from "./DelTodo";
import EditTodo from "./EditTodo";

const ItemDiv = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const CheckInput = styled.input.attrs({ type: "checkbox" })``;

const Item = styled.li`
  list-style-type: none;
  border-bottom: solid #7400ba 1px;
  padding-block: 1rem;

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
`;

const Buttons = styled.button`
  background-color: #ffffff00;
  color: #000;
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 5px;
  border: none;
`;

const TaskName = styled.p`
  margin-left: 12px;
  color: #0b0b0b;
  display: flex;
  align-items: center;
  width: -webkit-fill-available;
  justify-content: flex-start;

  ${CheckInput}:checked + & {
    text-decoration: line-through;
  }
`;

export default function TodoItem() {
  return (
    <Item>
      <ItemDiv>
        <CheckInput />
        <TaskName>Eating breakfast at 7:00</TaskName>
        <Buttons>
          <EditTodo />
          <DelTodo />
        </Buttons>
      </ItemDiv>
    </Item>
  );
}

const [todos, setTodos] = useState([
  { name: "Eating breakfast", status: true },
  { name: "Going to gym", status: false },
  { name: "Watching movie at 10:00", status: true },
]);

<TodoList todos={todos} />

export default function TodoList({ todos }) {
  return (
    <List>
      {todos.map((todo, index) => (
        <TodoItem key={index} todo={todo} />
      ))}
    </List>
  );
}

export default function TodoItem({ todo }) {
  return (
    <Item>
      <ItemDiv>
        <CheckInput checked={todo.status} onChange={() => {}} />
        <TaskName>{todo.name}</TaskName>
        <Buttons>
          <EditTodo />
          <DelTodo />
        </Buttons>
      </ItemDiv>
    </Item>
  );
}

<p className={`inline-block mt-1 ${todo.status ? "line-through" : ""}`}>
  {todo.name}
</p>