| | | 1 | | import type { ItemResponse, LocationResponse, RoomResponse } from "~/api/client"; |
| | | 2 | | import { relativeTime } from "~/lib/time"; |
| | | 3 | | |
| | 0 | 4 | | export function TuiItemDetail({ item, room, location, onEdit, onDelete }: { |
| | | 5 | | item: ItemResponse; |
| | | 6 | | room?: RoomResponse | null; |
| | | 7 | | location?: LocationResponse | null; |
| | | 8 | | onEdit: () => void; |
| | | 9 | | onDelete: () => void; |
| | | 10 | | }) { |
| | 0 | 11 | | return ( |
| | | 12 | | <div className="tui-panel tui-detail" style={{ flexShrink: 0, height: 140 }}> |
| | | 13 | | <span className="tui-panel-title">{`─[ detail · #${item.id} ]─`}</span> |
| | | 14 | | |
| | | 15 | | <div className="tui-detail-grid"> |
| | | 16 | | <Field label="name" value={item.name} emphasis="bright" /> |
| | | 17 | | <Field label="category" value={item.category ?? "—"} emphasis="warn" /> |
| | | 18 | | <Field label="room" value={room?.name ?? "—"} /> |
| | | 19 | | <Field label="location" value={location?.name ?? "—"} /> |
| | | 20 | | <Field label="desc" value={item.description || <Dim>(none)</Dim>} /> |
| | | 21 | | <Field label="updated" value={relativeTime(item.updatedAtUtc ?? item.createdAtUtc)} /> |
| | | 22 | | <div className="tui-detail-notes"> |
| | | 23 | | <span className="tui-detail-label">notes</span> |
| | | 24 | | <span className="tui-detail-colon">:</span>{" "} |
| | | 25 | | {item.notes ? ( |
| | | 26 | | <span>{item.notes}</span> |
| | | 27 | | ) : ( |
| | | 28 | | <Dim>(none — press [e] to edit)</Dim> |
| | | 29 | | )} |
| | | 30 | | </div> |
| | | 31 | | </div> |
| | | 32 | | |
| | | 33 | | <div className="tui-detail-actions"> |
| | | 34 | | <button type="button" onClick={onEdit} className="tui-detail-action">[e]dit</button> |
| | | 35 | | <span className="tui-detail-sep">·</span> |
| | | 36 | | <button type="button" onClick={onDelete} className="tui-detail-action tui-detail-action--danger">[d]elete</butto |
| | | 37 | | </div> |
| | | 38 | | </div> |
| | | 39 | | ); |
| | | 40 | | } |
| | | 41 | | |
| | 0 | 42 | | function Field({ label, value, emphasis }: { |
| | | 43 | | label: string; |
| | | 44 | | value: React.ReactNode; |
| | | 45 | | emphasis?: "bright" | "warn"; |
| | | 46 | | }) { |
| | 0 | 47 | | return ( |
| | | 48 | | <div className="tui-detail-field"> |
| | | 49 | | <span className="tui-detail-label">{label.padEnd(8, " ")}</span> |
| | | 50 | | <span className="tui-detail-colon">:</span>{" "} |
| | | 51 | | <span className={emphasis ? `tui-detail-value tui-detail-value--${emphasis}` : "tui-detail-value"}> |
| | | 52 | | {value} |
| | | 53 | | </span> |
| | | 54 | | </div> |
| | | 55 | | ); |
| | | 56 | | } |
| | | 57 | | |
| | 0 | 58 | | function Dim({ children }: { children: React.ReactNode }) { |
| | 0 | 59 | | return <span style={{ color: "var(--c-fg-3)" }}>{children}</span>; |
| | | 60 | | } |