feat: add version banner

Author: chargome

src/components/versionBanner.tsx

@@ -0,0 +1,27 @@
+import {useState} from 'react';
+import {Button} from '@radix-ui/themes';
+
+export function VersionBanner({
+  version,
+  onClickLatest,
+}: {
+  onClickLatest: () => void;
+  version: string;
+}) {
+  const [show, setShow] = useState(true);
+
+  return (
+    <div
+      className={`fixed bg-opacity-70	backdrop-blur-sm flex items-center content-center top-24 left-[50%] translate-x-[-50%] p-3 shadow-xl rounded bg-yellow-400 ${show ? '' : 'hidden'}`}
+    >
+      You are currently reading docs for sdk version {version}. Redirect to latest
+      version?{' '}
+      <Button className="ml-2" onClick={onClickLatest}>
+        Latest
+      </Button>
+      <Button variant="ghost" className="mx-2" onClick={() => setShow(false)}>
+        Hide
+      </Button>
+    </div>
+  );
+}

src/components/versionSelector/index.tsx

@@ -8,6 +8,8 @@ import {VERSION_INDICATOR} from 'sentry-docs/versioning';
 
 import styles from './style.module.scss';
 
+import {VersionBanner} from '../versionBanner';
+
 const stripTrailingSlash = (url: string) => {
   return url.replace(/\/$/, '');
 };
@@ -47,6 +49,14 @@ export function VersionSelector({versions}: {versions: string[]}) {
 
   return (
     <div>
+      {selectedVersion !== 'latest' && (
+        <VersionBanner
+          version={selectedVersion}
+          onClickLatest={() => {
+            handleVersionChange('latest');
+          }}
+        />
+      )}
       <RadixSelect.Root value={selectedVersion} onValueChange={handleVersionChange}>
         <RadixSelect.Trigger aria-label="Version" className={styles.select}>
           <RadixSelect.Value placeholder="Version">