docs: add new LegacyApiKeys component

apps/docs/components/LegacyApiKeys.tsx

@@ -0,0 +1,36 @@
+import {
+  TooltipProvider_Shadcn_,
+  Tooltip_Shadcn_,
+  TooltipTrigger_Shadcn_,
+  TooltipContent_Shadcn_,
+} from 'ui'
+
+interface LegacyApiKeysProps {
+  keyword: string
+  type: 'anon' | 'secret'
+}
+
+export default function LegacyApiKeys({ keyword, type }: LegacyApiKeysProps) {
+  return (
+    <>
+      <TooltipProvider_Shadcn_>
+        <Tooltip_Shadcn_>
+          <TooltipTrigger_Shadcn_>
+            <code>{keyword}</code>
+          </TooltipTrigger_Shadcn_>
+          <TooltipContent_Shadcn_ className="text-sm">
+            {type === 'anon' ? (
+              <p>
+                equivalent to the <code>anon</code> key
+              </p>
+            ) : (
+              <p>
+                equivalent to the <code>secret</code> key
+              </p>
+            )}
+          </TooltipContent_Shadcn_>
+        </Tooltip_Shadcn_>
+      </TooltipProvider_Shadcn_>
+    </>
+  )
+}

apps/docs/components/index.tsx

@@ -80,6 +80,7 @@ import { AuthSmsProviderConfig } from './AuthSmsProviderConfig'
 import { Extensions } from './Extensions'
 import { JwtGenerator } from './JwtGenerator'
 import { RealtimeLimitsEstimator } from './RealtimeLimitsEstimator'
+import LegacyApiKeys from './LegacyApiKeys'
 
 const components = {
   ...markdownComponents,
@@ -147,6 +148,7 @@ const components = {
   Image: (props: any) => <Image fill className="object-contain" {...props} />,
   JwtGenerator,
   KotlinProjectSetup,
+  LegacyApiKeys,
   Link,
   MigrationWarnings,
   NavData,

apps/docs/features/docs/MdxBase.shared.tsx

@@ -13,6 +13,7 @@ import { CostWarning } from '~/components/AuthSmsProviderConfig/AuthSmsProviderC
 import ButtonCard from '~/components/ButtonCard'
 import { Extensions } from '~/components/Extensions'
 import { JwtGenerator } from '~/components/JwtGenerator'
+import LegacyApiKeys from '~/components/LegacyApiKeys'
 import {
   AuthErrorCodesTable,
   AuthRateLimits,
@@ -68,6 +69,7 @@ const components = {
   Image: (props: any) => <Image fill className="object-contain" {...props} />,
   JwtGenerator,
   KotlinProjectSetup,
+  LegacyApiKeys,
   Link,
   MigrationWarnings,
   NavData,