UUID Reference

import { Trash2 } from "lucide-react";

interface Note {
  id: string;
  content: string;
  createdAt: string;
}

export default function App() {
  const [notes, setNotes] = usePersistentItem<Note[]>("notes", []);
  const [input, setInput] = React.useState("");

  const addNote = () => {
    if (!input.trim()) return;
    
    const newNote: Note = {
      id: uuidv4(),
      content: input.trim(),
      createdAt: new Date().toISOString(),
    };
    
    setNotes(prev => [newNote, ...prev]);
    setInput("");
  };

  const deleteNote = (id: string) => {
    setNotes(prev => prev.filter(n => n.id !== id));
  };

  return (
    <div>
      <div className="flex gap-2">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="New note..."
          onKeyDown={e => e.key === "Enter" && addNote()}
        />
        <button onClick={addNote}>Add</button>
      </div>

      {notes.map(note => (
        <div key={note.id}>
          <div className="pt-4 flex items-start justify-between gap-2">
            <p className="flex-1">{note.content}</p>
            <button variant="ghost" size="icon" onClick={() => deleteNote(note.id)}>
              <Trash2 className="w-4 h-4" />
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}