Function TodoMVP

src/examples/todo.tsx:28–138

()

);

export function TodoMVP() {
  const [loading, setLoading] = createSignal(true);
  // Get system color scheme mode
  const colorScheme = useColorScheme();
  let newTodo: string;
  let textField: HTMLTextFieldElement | null = null;

  function addTodo() {
    setTodos((prev) => {
      const next = [...prev];
      next.push({
        id: next.length + 1,
        title: newTodo,
        completed: false,
      });
      storageApi.set("todos", JSON.stringify(next));
      newTodo = "";
      textField?.clear();
      return next;
    });
  }

  createRenderEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 500);
  });

  return (
    <scroll-view
      style={{
        width: "100%",
        height: "100%",
      }}
    >
      <view
        style={{
          width: "100%",
          padding: 20,
          alignItems: "center",
          gap: 10,
          height: loading() || !todos().length ? "100%" : undefined,
        }}
      >
        <view
          style={{
            flexDirection: "row",
            gap: 10,
            alignItems: "center",
            width: "100%",
            justifyContent: "space-between",
            borderWidth: 1,
            borderRadius: 5,
            borderColor: colorScheme === "dark"
              ? "rgb(68, 68, 68)"
              : "rgb(200, 200, 200)",
            paddingHorizontal: 10,
          }}