Todo, kanban and notes

import { useState } from "react";
import { useLocalStorage } from "./useLocalStorage";
import { TodoList } from "./views/TodoList";
import { Board } from "./views/Board";
import { Notes } from "./views/Notes";
import { newId, type Note, type Task } from "./types";

const VIEWS = ["list", "board", "notes"] as const;
type View = (typeof VIEWS)[number];

export default function App() {
  const [view, setView] = useState<View>("list");
  const [tasks, setTasks] = useLocalStorage<Task[]>("tasks", [
    { id: newId(), title: "Try the board view", column: "todo", createdAt: Date.now() },
    { id: newId(), title: "Ask Codexa to add due dates", column: "doing", createdAt: Date.now() },
  ]);
  const [notes, setNotes] = useLocalStorage<Note[]>("notes", []);

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <header className="border-b border-slate-200 bg-white">
        <div className="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
          <h1 className="font-semibold tracking-tight">Tasks</h1>
          <div className="flex rounded-md border border-slate-300 p-0.5 text-sm" role="tablist" aria-label="View">
            {VIEWS.map((v) => (
              <button key={v} type="button" role="tab" aria-selected={view === v} onClick={() => setView(v)} className={"rounded px-3 py-1 capitalize " + (view === v ? "bg-slate-900 text-white" : "hover:bg-slate-100")}>
                {v}
              </button>
            ))}
          </div>
        </div>
      </header>
      <main className="mx-auto max-w-5xl px-4 py-6 sm:px-6" role="tabpanel">
        {view === "list" ? <TodoList tasks={tasks} setTasks={setTasks} /> : view === "board" ? <Board tasks={tasks} setTasks={setTasks} /> : <Notes notes={notes} setNotes={setNotes} />}
      </main>
    </div>
  );
}