Function Header

src/ui-react-inspector/Header.tsx:14–43

({s}: StoreProp)

import {useSetValueCallback, useValue} from '../ui-react/index.ts';

export const Header = ({s}: StoreProp) => {
  const position = useValue(POSITION_VALUE, s) ?? 1;
  const handleClick = () => open('https://tinybase.org', '_blank');
  const handleClose = useSetValueCallback(OPEN_VALUE, () => false, [], s);
  const handleDock = useSetValueCallback(
    POSITION_VALUE,
    (event: MouseEvent<HTMLImageElement>) =>
      number(event[CURRENT_TARGET].dataset.id),
    [],
    s,
  );

  return (
    <header>
      <img className="flat" title={TITLE} onClick={handleClick} />
      <span>{TITLE}</span>
      {arrayMap(POSITIONS, (name, p) =>
        p == position ? null : (
          <img
            onClick={handleDock}
            data-id={p}
            title={'Dock to ' + name}
            key={p}
          />
        ),
      )}
      <img className="flat" onClick={handleClose} title="Close" />
    </header>
  );
};