feat(console): cloud preview broadcast (#3314)

packages/console/src/cloud/components/Broadcast/index.module.scss

@@ -0,0 +1,19 @@
+@use '@/scss/underscore' as _;
+
+.broadcast {
+  background-color: var(--color-layer-1);
+  position: absolute;
+  top: _.unit(4);
+  left: 50%;
+  font: var(--font-label-2);
+  border-radius: 18px;
+  padding: _.unit(2) _.unit(5);
+  box-shadow: var(--shadow-2);
+  user-select: none;
+  text-align: center;
+  transform: translateX(-50%);
+
+  .link {
+    margin-left: _.unit(3);
+  }
+}

packages/console/src/cloud/components/Broadcast/index.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+
+import { logtoBlogLink } from '@/cloud/constants';
+import TextLink from '@/components/TextLink';
+
+import * as styles from './index.module.scss';
+
+const Broadcast = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <div className={styles.broadcast}>
+      <span>{t('cloud.broadcast')}</span>
+      <TextLink href={logtoBlogLink} target="_blank" className={styles.link}>
+        {t('general.learn_more')}
+      </TextLink>
+    </div>
+  );
+};
+
+export default Broadcast;

packages/console/src/cloud/constants/index.ts

@@ -4,6 +4,8 @@ import type { OnboardingSieConfig } from '../types';
 import { Authentication } from '../types';
 
 export const reservationLink = 'https://calendly.com/logto/30min';
+export const logtoBlogLink =
+  'https://www.notion.so/silverhand/About-Logto-Cloud-Preview-ca316bc05f2a4b9188047da014124434?pvs=4';
 
 export const defaultOnboardingSieConfig: OnboardingSieConfig = {
   color: '#5D34F2',

packages/console/src/containers/AppContent/index.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useHref, useLocation, useNavigate } from 'react-router-dom';
 
+import Broadcast from '@/cloud/components/Broadcast';
 import useUserOnboardingData from '@/cloud/hooks/use-user-onboarding-data';
 import { OnboardingPage } from '@/cloud/types';
 import { getOnboardPagePathname } from '@/cloud/utils';
@@ -78,10 +79,13 @@ const AppContent = () => {
   }
 
   return (
-    <div className={styles.app}>
-      <Topbar className={conditional(scrollTop && styles.topbarShadow)} />
-      <Outlet context={{ scrollableContent } satisfies AppContentOutletContext} />
-    </div>
+    <>
+      <div className={styles.app}>
+        <Topbar className={conditional(scrollTop && styles.topbarShadow)} />
+        <Outlet context={{ scrollableContent } satisfies AppContentOutletContext} />
+      </div>
+      {isCloud && <Broadcast />}
+    </>
   );
 };
 

packages/phrases/src/locales/de/translation/admin-console/cloud.ts

@@ -95,6 +95,7 @@ const cloud = {
       web_tab: 'Web', // UNTRANSLATED
     },
   },
+  broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
 };
 
 export default cloud;

packages/phrases/src/locales/en/translation/admin-console/cloud.ts

@@ -95,6 +95,7 @@ const cloud = {
       web_tab: 'Web',
     },
   },
+  broadcast: '📣 You are participating in Logto Cloud Preview',
 };
 
 export default cloud;

packages/phrases/src/locales/fr/translation/admin-console/cloud.ts

@@ -95,6 +95,7 @@ const cloud = {
       web_tab: 'Web', // UNTRANSLATED
     },
   },
+  broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
 };
 
 export default cloud;

packages/phrases/src/locales/ko/translation/admin-console/cloud.ts

@@ -95,6 +95,7 @@ const cloud = {
       web_tab: 'Web', // UNTRANSLATED
     },
   },
+  broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
 };
 
 export default cloud;

packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts

@@ -95,6 +95,7 @@ const cloud = {
       web_tab: 'Web', // UNTRANSLATED
     },
   },
+  broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
 };
 
 export default cloud;

packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts

@@ -95,6 +95,7 @@ const cloud = {
       web_tab: 'Web', // UNTRANSLATED
     },
   },
+  broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
 };
 
 export default cloud;

packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts

@@ -95,6 +95,7 @@ const cloud = {
       web_tab: 'Web', // UNTRANSLATED
     },
   },
+  broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
 };
 
 export default cloud;

packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts

@@ -95,6 +95,7 @@ const cloud = {
       web_tab: 'Web', // UNTRANSLATED
     },
   },
+  broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
 };
 
 export default cloud;