weseek__growi/apps/app/src/client/components/SystemVersion.tsx

import React, { type JSX } from 'react';

import { useGrowiVersion } from '~/states/global';
import { useShortcutsModalActions } from '~/states/ui/modal/shortcuts';

import styles from './SystemVersion.module.scss';

type Props = {
  showShortcutsButton?: boolean;
};

const SystemVersion = (props: Props): JSX.Element => {
  const { showShortcutsButton } = props;

  const { open: openShortcutsModal } = useShortcutsModalActions();

  const growiVersion = useGrowiVersion();
  // add classes to cmd-key by OS
  const platform = window.navigator.platform.toLowerCase();
  const isMac = platform.indexOf('mac') > -1;
  const os = isMac ? 'mac' : 'win';

  return (
    <>
      <div
        className={`${styles['system-version']} d-none d-md-flex d-edit-none d-print-none align-items-center`}
      >
        <span>
          <a href="https://growi.org">GROWI</a> {growiVersion}
        </span>
        {showShortcutsButton && (
          <button
            type="button"
            className="btn btn-link ms-2 p-0"
            onClick={() => openShortcutsModal()}
          >
            <span className="material-symbols-outlined">keyboard</span>&nbsp;
            <span className={`cmd-key ${os}`}></span>-/
          </button>
        )}
      </div>
    </>
  );
};

export default SystemVersion;