Todo, kanban and notes

import { useState } from "react";
import { newId, type Note } from "../types";

type Props = { notes: Note[]; setNotes: (next: Note[] | ((prev: Note[]) => Note[])) => void };

export function Notes({ notes, setNotes }: Props) {
  const [selected, setSelected] = useState<string | null>(notes[0]?.id ?? null);
  const current = notes.find((n) => n.id === selected) ?? null;

  const create = () => {
    const n: Note = { id: newId(), title: "Untitled", body: "", updatedAt: Date.now() };
    setNotes((prev) => [n, ...prev]);
    setSelected(n.id);
  };
  const update = (patch: Partial<Note>) => {
    if (!current) return;
    setNotes((prev) => prev.map((n) => (n.id === current.id ? { ...n, ...patch, updatedAt: Date.now() } : n)));
  };
  const remove = () => {
    if (!current) return;
    setNotes((prev) => prev.filter((n) => n.id !== current.id));
    setSelected(null);
  };

  return (
    <div className="grid gap-4 md:grid-cols-[240px_1fr]">
      <aside className="rounded-xl border border-slate-200 bg-white p-2">
        <button type="button" onClick={create} className="w-full rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white">
          New note
        </button>
        <ul className="mt-2 space-y-1">
          {notes.map((n) => (
            <li key={n.id}>
              <button type="button" onClick={() => setSelected(n.id)} aria-current={n.id === selected ? "true" : undefined} className={"w-full truncate rounded-md px-2 py-1.5 text-left text-sm " + (n.id === selected ? "bg-slate-100 font-medium" : "hover:bg-slate-50")}>
                {n.title || "Untitled"}
              </button>
            </li>
          ))}
          {notes.length === 0 ? <li className="p-3 text-center text-xs text-slate-500">No notes yet</li> : null}
        </ul>
      </aside>
      <section className="rounded-xl border border-slate-200 bg-white p-4">
        {current ? (
          <>
            <label className="sr-only" htmlFor="note-title">
              Title
            </label>
            <input id="note-title" value={current.title} onChange={(e) => update({ title: e.target.value })} className="w-full border-0 text-lg font-semibold outline-none" />
            <label className="sr-only" htmlFor="note-body">
              Body
            </label>
            <textarea id="note-body" value={current.body} onChange={(e) => update({ body: e.target.value })} rows={14} placeholder="Write something…" className="mt-2 w-full resize-y rounded-md border border-slate-200 p-3 text-sm" />
            <div className="mt-2 flex items-center justify-between text-xs text-slate-500">
              <span>Saved {new Date(current.updatedAt).toLocaleTimeString()}</span>
              <button type="button" onClick={remove} className="text-red-600 hover:underline">
                Delete note
              </button>
            </div>
          </>
        ) : (
          <p className="p-6 text-center text-sm text-slate-500">Select a note or create a new one.</p>
        )}
      </section>
    </div>
  );
}