fix(mod multiboard): show account import empty state

src/components/mod-empty-state/index.ts

@@ -0,0 +1 @@
+export { default as ModEmptyState } from './mod-empty-state';

src/components/mod-empty-state/mod-empty-state.module.css

@@ -0,0 +1,28 @@
+.modEmptyState {
+  padding: 1em 0;
+  text-align: center;
+  width: 100%;
+}
+
+.modEmptyStateTitle {
+  color: red;
+  display: block;
+  margin: 0;
+  font-size: x-large;
+  font-weight: bold;
+  line-height: normal;
+}
+
+.modEmptyStateAction {
+  color: var(--post-mobile-abbr-text-color);
+  margin-top: 0.5em;
+}
+
+.modEmptyStateAction a {
+  text-decoration: var(--button-text-decoration);
+  color: var(--button-desktop-text-color);
+}
+
+.modEmptyStateAction a:hover {
+  color: var(--button-desktop-text-color-hover);
+}

src/components/mod-empty-state/mod-empty-state.tsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import { Trans, useTranslation } from 'react-i18next';
+import styles from './mod-empty-state.module.css';
+
+const MOD_ACCOUNT_SETTINGS_LINK_COMPONENTS = {
+  1: <Link to='/mod/settings#account-settings' />,
+};
+
+const ModEmptyState = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.modEmptyState} role='status'>
+      <div className={styles.modEmptyStateTitle}>{t('not_mod_of_any_board')}</div>
+      <div className={styles.modEmptyStateAction}>
+        <Trans i18nKey='go_to_settings_to_import_mod_account' components={MOD_ACCOUNT_SETTINGS_LINK_COMPONENTS} />
+      </div>
+    </div>
+  );
+};
+
+export default ModEmptyState;