A client-side React component that renders a single ticket note with inline editing, delete, and author attribution capabilities. ## Key Components ### Interfaces - **`TicketNote`** — Data model for a note, including `id`, `text`, `authorName`, `authorAvatar`, `createdAt`, and `isOwn` (controls edit/delete visibility) - **`TicketNoteCardProps`** — Component props accepting a `TicketNote`, optional `onEdit`/`onDelete` callbacks, and `className` ### Component - **`TicketNoteCard`** — Stateful card component managing edit mode toggle, text input state, save/cancel/keyboard interactions (`Enter` to save, `Escape` to cancel) ## Usage Example ```typescript import { TicketNoteCard, TicketNote } from "./ticket-note-card" const note: TicketNote = { id: "note-1", text: "Customer confirmed the issue is reproducible on Windows only.", authorName: "Jane Doe", authorAvatar: "https://cdn.example.com/avatars/jane.png", createdAt: "Jan 15, 2025", isOwn: true, } function NoteList() { const handleEdit = (id: string, text: string) => { console.log("Updated note:", id, text) } const handleDelete = (id: string) => { console.log("Deleted note:", id) } return ( ) } ``` ## Behavior Notes - Edit/delete actions are only rendered when `note.isOwn` is `true` - Save is disabled if the trimmed input is empty - Uses `SquareAvatar` for author display and `Input` for inline editing