Qwik-todo

qwik-todo.tsx

import { component$, useStore, $} from '@builder.io/qwik';

export const App = component$(() => {
  return <TodoList></TodoList>;
});


interface ITodo {
  title: string;
  description: string;
}

interface ITodoList {
  todos: Array<ITodo>;
}

export const Todo = component$((props: ITodo) => {
  return (
    <div class="mx-4 my-5 border border-gray-300">
      <h1 class="text-lg">{props.title}</h1>
      <h3 class="text-base">{props.description}</h3>
    </div>
  );
});

export const TodoList = component$(() => {
  const state = useStore<ITodoList>(
    {
      todos: [],
    },
    { recursive: true }
  );

  const todoTitle = useStore({ title: "" });
  const todoDescription = useStore({ description: "" });

  const addTodo = $(() => {
    console.log(state.todos);
    state.todos.push({
      title: todoTitle.title,
      description: todoDescription.description,
    });
    todoTitle.title = "";
    todoDescription.description = "";
  });

  return (
    <>
      <div class="todo-section my-3 border-gray-300">
        {state.todos.map((todo, idx) => (
          <Todo
            key={idx.toString()}
            title={todo.title}
            description={todo.description}
          ></Todo>
        ))}
      </div>
      <div class="add-todo-section">
        <label>
          Todo title
          <input
            type="text"
            name="todo-title"
            value={todoTitle.title}
            class="shadow appearance-none border m-3 border-black rounded "
            onChange$={(ev) => (todoTitle.title = ev.target.value)}
          />
        </label>
        <label>
          Todo description
          <input
            type="text"
            name="todo-description"
            value={todoDescription.description}
            onChange$={(ev) => (todoDescription.description = ev.target.value)}
            class="shadow appearance-none border m-3 border-black rounded "
          />
        </label>
      </div>
      <button
        onClick$={addTodo}
        class="text-neutral-100 bg-slate-500 px-4 py-3 rounded-md"
      >
        Add todo
      </button>
    </>
  );
});