add component

Author: chargome

src/components/linkToActivePlatform.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import {useEffect, useState} from 'react';
+import Link from 'next/link';
+
+import {KEY_ACTIVE_PLATFORM} from 'sentry-docs/constants/localStorage';
+
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+}
+const DEFAULT_LINK = '/platforms';
+
+export function LinkToActivePlatform({className, children}: Props) {
+  const [href, setHref] = useState(DEFAULT_LINK);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof localStorage === 'undefined') return;
+
+    let activePlatform = localStorage.getItem(KEY_ACTIVE_PLATFORM);
+    if (activePlatform) {
+      const segments = activePlatform.split('.');
+      if (segments.length === 2) {
+        activePlatform = `${segments[0]}/guides/${segments[1]}`;
+      } else {
+        activePlatform = `${segments[0]}`;
+      }
+      setHref(`${DEFAULT_LINK}/${activePlatform}`);
+    }
+  }, []);
+
+  return (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  );
+}

src/components/platformSelector/index.tsx

@@ -15,6 +15,7 @@ import {matchSorter} from 'match-sorter';
 import {usePathname, useRouter} from 'next/navigation';
 
 import {PlatformIcon} from 'sentry-docs/components/platformIcon';
+import {KEY_ACTIVE_PLATFORM} from 'sentry-docs/constants/localStorage';
 import {Platform, PlatformGuide, PlatformIntegration} from 'sentry-docs/types';
 import {uniqByReference} from 'sentry-docs/utils';
 
@@ -94,7 +95,7 @@ export function PlatformSelector({
   const onPlatformChange = (platformKey: string) => {
     const platform_ = platformsAndGuides.find(platform => platform.key === platformKey);
     if (platform_) {
-      localStorage.setItem('active-platform', platform_.key);
+      localStorage.setItem(KEY_ACTIVE_PLATFORM, platform_.key);
       router.push(platform_.url);
     }
   };
@@ -114,9 +115,9 @@ export function PlatformSelector({
   );
   useEffect(() => {
     if (currentPlatformKey) {
-      localStorage.setItem('active-platform', currentPlatformKey);
+      localStorage.setItem(KEY_ACTIVE_PLATFORM, currentPlatformKey);
     } else {
-      setStoredPlatformKey(localStorage.getItem('active-platform'));
+      setStoredPlatformKey(localStorage.getItem(KEY_ACTIVE_PLATFORM));
     }
   }, [currentPlatformKey]);
 

src/constants/localStorage.ts

@@ -0,0 +1 @@
+export const KEY_ACTIVE_PLATFORM = 'active-platform';

src/mdxComponents.ts

@@ -16,6 +16,7 @@ import {Expandable} from './components/expandable';
 import {GuideGrid} from './components/guideGrid';
 import {JsBundleList} from './components/jsBundleList';
 import {LambdaLayerDetail} from './components/lambdaLayerDetail';
+import {LinkToActivePlatform} from './components/linkToActivePlatform';
 import {LinkWithPlatformIcon} from './components/linkWithPlatformIcon';
 import {OnboardingOption, OnboardingOptionButtons} from './components/onboarding';
 import {OrgAuthTokenNote} from './components/orgAuthTokenNote';
@@ -66,6 +67,7 @@ export function mdxComponents(
     LambdaLayerDetail,
     Link: SmartLink,
     LinkWithPlatformIcon,
+    LinkToActivePlatform,
     OrgAuthTokenNote,
     PageGrid,
     ParamTable,