| 1011 | }; |
| 1012 | |
| 1013 | const Header = (props: StoreProp) => { |
| 1014 | const position = useValue(POSITION_VALUE, props.s); |
| 1015 | const handleClick = () => open('https://tinybase.org', '_blank'); |
| 1016 | const handleClose = () => props.s.setValue(OPEN_VALUE, false); |
| 1017 | const handleDock = (event: MouseEvent & {currentTarget: HTMLImageElement}) => |
| 1018 | props.s.setValue(POSITION_VALUE, number(event.currentTarget.dataset.id)); |
| 1019 | |
| 1020 | return ( |
| 1021 | <header> |
| 1022 | <img class="flat" title={TITLE} onClick={handleClick} /> |
| 1023 | <span>{TITLE}</span> |
| 1024 | {arrayMap(POSITIONS, (name, p) => |
| 1025 | p == (position() ?? 1) ? ( |
| 1026 | EMPTY_STRING |
| 1027 | ) : ( |
| 1028 | <img onClick={handleDock} data-id={p} title={'Dock to ' + name} /> |
| 1029 | ), |
| 1030 | )} |
| 1031 | <img class="flat" onClick={handleClose} title="Close" /> |
| 1032 | </header> |
| 1033 | ); |
| 1034 | }; |
| 1035 | |
| 1036 | const Nub = (props: StoreProp) => { |
| 1037 | const position = useValue(POSITION_VALUE, props.s); |