| | | 1 | | import { useSyncExternalStore } from "react"; |
| | | 2 | | import type { LocationResponse, RoomResponse } from "~/api/client"; |
| | | 3 | | |
| | 0 | 4 | | const noopSubscribe = () => () => {}; |
| | 0 | 5 | | const getClientDate = () => new Date().toLocaleDateString(); |
| | 0 | 6 | | const getServerDate = () => ""; |
| | | 7 | | |
| | 0 | 8 | | export function CDEMenuBar() { |
| | 0 | 9 | | const menus = ["File", "Selected", "View", "Items", "Help"]; |
| | 0 | 10 | | return ( |
| | | 11 | | <div className="cde-menubar"> |
| | 0 | 12 | | {menus.map(m => ( |
| | 0 | 13 | | <span key={m} className="cde-menubar-item">{m}</span> |
| | | 14 | | ))} |
| | | 15 | | </div> |
| | | 16 | | ); |
| | | 17 | | } |
| | | 18 | | |
| | 0 | 19 | | export function CDEFootRow({ onNewItem }: { onNewItem: () => void }) { |
| | 0 | 20 | | const slots: [string, (() => void) | null][] = [ |
| | | 21 | | ["Items", null], ["Rooms", null], ["Stats", null], |
| | | 22 | | ["Add", onNewItem], |
| | | 23 | | ["Print", null], ["Trash", null], ["Help", null], |
| | | 24 | | ]; |
| | 0 | 25 | | return ( |
| | | 26 | | <div className="cde-footrow"> |
| | 0 | 27 | | {slots.map(([label, action], i) => ( |
| | 0 | 28 | | <button |
| | | 29 | | key={label} |
| | | 30 | | className={`cde-footrow-btn${i === 0 ? " cde-footrow-btn--primary" : ""}`} |
| | | 31 | | onClick={action ?? undefined} |
| | | 32 | | type="button" |
| | | 33 | | > |
| | | 34 | | {label} |
| | | 35 | | </button> |
| | | 36 | | ))} |
| | | 37 | | </div> |
| | | 38 | | ); |
| | | 39 | | } |
| | | 40 | | |
| | 0 | 41 | | export function Win98MenuBar() { |
| | 0 | 42 | | const menus = ["File", "Edit", "View", "Items", "Tools", "Help"]; |
| | 0 | 43 | | return ( |
| | | 44 | | <div className="win98-menubar"> |
| | 0 | 45 | | {menus.map(m => ( |
| | 0 | 46 | | <span key={m} className="win98-menubar-item"> |
| | | 47 | | <u>{m[0]}</u>{m.slice(1)} |
| | | 48 | | </span> |
| | | 49 | | ))} |
| | | 50 | | </div> |
| | | 51 | | ); |
| | | 52 | | } |
| | | 53 | | |
| | 0 | 54 | | export function Win98AddressBar({ location, room }: { |
| | | 55 | | location?: LocationResponse | null; |
| | | 56 | | room?: RoomResponse | null; |
| | | 57 | | }) { |
| | 0 | 58 | | const path = room && location |
| | | 59 | | ? `C:\\ClutterStock\\${location.name}\\${room.name}` |
| | | 60 | | : location |
| | | 61 | | ? `C:\\ClutterStock\\${location.name}` |
| | | 62 | | : `C:\\ClutterStock\\All Items`; |
| | 0 | 63 | | return ( |
| | | 64 | | <div className="win98-addressbar"> |
| | | 65 | | <span className="win98-addressbar-label">Address</span> |
| | | 66 | | <div className="win98-addressbar-field"> |
| | | 67 | | <span>📁</span> |
| | | 68 | | <span>{path}</span> |
| | | 69 | | </div> |
| | | 70 | | <button className="win98-addressbar-go">Go</button> |
| | | 71 | | </div> |
| | | 72 | | ); |
| | | 73 | | } |
| | | 74 | | |
| | 0 | 75 | | export function Win98StatusBar({ count, location, room }: { |
| | | 76 | | count: number; |
| | | 77 | | location?: LocationResponse | null; |
| | | 78 | | room?: RoomResponse | null; |
| | | 79 | | }) { |
| | 0 | 80 | | const path = room && location |
| | | 81 | | ? `${location.name}\\${room.name}` |
| | | 82 | | : location?.name ?? "All Items"; |
| | | 83 | | // toLocaleDateString resolves to the host's locale, which differs between the |
| | | 84 | | // SSR Node process and the browser — useSyncExternalStore returns the empty |
| | | 85 | | // server snapshot during SSR and switches to the client value after hydration. |
| | 0 | 86 | | const date = useSyncExternalStore(noopSubscribe, getClientDate, getServerDate); |
| | 0 | 87 | | return ( |
| | | 88 | | <div className="win98-statusbar"> |
| | | 89 | | <div className="win98-statusbar-seg">{count} object(s)</div> |
| | | 90 | | <div className="win98-statusbar-seg">{path}</div> |
| | | 91 | | <div className="win98-statusbar-seg win98-statusbar-seg--narrow"> |
| | | 92 | | {date} |
| | | 93 | | </div> |
| | | 94 | | </div> |
| | | 95 | | ); |
| | | 96 | | } |