| | | 1 | | import type { ItemResponse, LocationResponse, RoomResponse } from "~/api/client"; |
| | | 2 | | import { CategoryTag } from "~/components/category-tag"; |
| | | 3 | | import { DrawerField, PanelHeader } from "~/components/panel-ui"; |
| | | 4 | | import { nameHue } from "~/lib/colors"; |
| | | 5 | | import { relativeTime } from "~/lib/time"; |
| | | 6 | | |
| | 0 | 7 | | export function ItemViewPanel({ item, room, location, onClose, onEdit, onDelete }: { |
| | | 8 | | item: ItemResponse; |
| | | 9 | | room?: RoomResponse | null; |
| | | 10 | | location?: LocationResponse | null; |
| | | 11 | | onClose: () => void; |
| | | 12 | | onEdit: () => void; |
| | | 13 | | onDelete: () => void; |
| | | 14 | | }) { |
| | 0 | 15 | | const hue = nameHue(item.name ?? ""); |
| | | 16 | | |
| | 0 | 17 | | return ( |
| | | 18 | | <aside className="tui-panel" style={{ |
| | | 19 | | width: 340, borderLeft: "1px solid var(--c-border)", |
| | | 20 | | background: "var(--c-bg-2)", flexShrink: 0, |
| | | 21 | | display: "flex", flexDirection: "column", overflowY: "auto", |
| | | 22 | | }}> |
| | | 23 | | <span className="tui-panel-title">{`─[ detail · #${item.id} ]─`}</span> |
| | | 24 | | <PanelHeader |
| | | 25 | | label={`ITEM #${item.id}`} |
| | | 26 | | actions={ |
| | | 27 | | <button onClick={onEdit} style={{ |
| | | 28 | | fontSize: 11, color: "var(--c-accent)", cursor: "pointer", |
| | | 29 | | padding: "2px 8px", borderRadius: 4, border: "1px solid var(--c-border)", |
| | | 30 | | background: "transparent", fontFamily: "inherit", |
| | | 31 | | }}> |
| | | 32 | | Edit |
| | | 33 | | </button> |
| | | 34 | | } |
| | | 35 | | onClose={onClose} |
| | | 36 | | /> |
| | | 37 | | |
| | | 38 | | <div style={{ padding: "16px 16px 0" }}> |
| | | 39 | | <div style={{ |
| | | 40 | | height: 120, borderRadius: 8, |
| | | 41 | | background: `linear-gradient(135deg, oklch(0.84 0.05 ${hue}), oklch(0.70 0.06 ${(hue + 40) % 360}))`, |
| | | 42 | | border: "1px solid var(--c-border)", |
| | | 43 | | }} /> |
| | | 44 | | </div> |
| | | 45 | | |
| | | 46 | | <div style={{ padding: "14px 16px 6px" }}> |
| | | 47 | | <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--c-fg)" }}> |
| | | 48 | | {item.name} |
| | | 49 | | </div> |
| | | 50 | | {item.description && ( |
| | | 51 | | <div style={{ marginTop: 4, fontSize: 13, color: "var(--c-fg-2)" }}>{item.description}</div> |
| | | 52 | | )} |
| | | 53 | | </div> |
| | | 54 | | |
| | | 55 | | <div style={{ padding: "4px 16px" }}> |
| | | 56 | | <DrawerField label="Category" value={item.category ? <CategoryTag name={item.category} /> : null} /> |
| | | 57 | | <DrawerField label="Room" value={room?.name} /> |
| | | 58 | | <DrawerField label="Location" value={location?.name} /> |
| | | 59 | | <DrawerField label="Updated" value={relativeTime(item.updatedAtUtc ?? item.createdAtUtc)} /> |
| | | 60 | | <DrawerField label="Created" value={relativeTime(item.createdAtUtc)} /> |
| | | 61 | | </div> |
| | | 62 | | |
| | | 63 | | <div style={{ padding: "12px 16px 20px" }}> |
| | | 64 | | <div style={{ |
| | | 65 | | fontSize: 10, color: "var(--c-fg-3)", textTransform: "uppercase", |
| | | 66 | | letterSpacing: "0.06em", fontWeight: 600, marginBottom: 6, |
| | | 67 | | }}> |
| | | 68 | | Notes |
| | | 69 | | </div> |
| | | 70 | | <div style={{ |
| | | 71 | | fontSize: 13, lineHeight: 1.5, padding: 10, |
| | | 72 | | background: "var(--c-bg-3)", border: "1px solid var(--c-border)", |
| | | 73 | | borderRadius: 6, minHeight: 48, |
| | | 74 | | color: item.notes ? "var(--c-fg-2)" : "var(--c-fg-3)", |
| | | 75 | | fontStyle: item.notes ? "normal" : "italic", |
| | | 76 | | }}> |
| | | 77 | | {item.notes || "No notes yet."} |
| | | 78 | | </div> |
| | | 79 | | </div> |
| | | 80 | | |
| | | 81 | | <div style={{ padding: "0 16px 20px", marginTop: "auto" }}> |
| | | 82 | | <button |
| | | 83 | | onClick={onDelete} |
| | | 84 | | style={{ |
| | | 85 | | width: "100%", padding: "7px 14px", borderRadius: 6, |
| | | 86 | | border: "1px solid rgba(239,68,68,0.4)", background: "rgba(239,68,68,0.07)", |
| | | 87 | | color: "#ef4444", fontSize: 13, cursor: "pointer", fontFamily: "inherit", |
| | | 88 | | }} |
| | | 89 | | > |
| | | 90 | | Delete item |
| | | 91 | | </button> |
| | | 92 | | </div> |
| | | 93 | | </aside> |
| | | 94 | | ); |
| | | 95 | | } |
| | | 96 | | |