docs: Version selector

Author: amannn

docs/src/components/Footer.tsx

@@ -2,6 +2,7 @@ import {useRouter} from 'next/router';
 import config from '@/config';
 import FooterLink from './FooterLink';
 import FooterSeparator from './FooterSeparator';
+import FooterVersionSelector from './FooterVersionSelector';
 
 export default function Footer() {
   const router = useRouter();
@@ -19,6 +20,8 @@ export default function Footer() {
           <FooterLink href="/examples">Examples</FooterLink>
           <FooterSeparator />
           <FooterLink href="/blog">Blog</FooterLink>
+          <FooterSeparator />
+          <FooterVersionSelector />
         </div>
         <div>
           <FooterLink href={config.blueskyUrl} target="_blank">

docs/src/components/FooterVersionSelector.tsx

@@ -0,0 +1,19 @@
+import {ChangeEvent} from 'react';
+
+export default function FooterVersionSelector() {
+  function onChange(event: ChangeEvent<HTMLSelectElement>) {
+    const version = event.target.value;
+    window.location.href = `https://${version}.next-intl.dev`;
+  }
+
+  return (
+    <select
+      className="inline-flex appearance-none items-center bg-transparent py-3 text-xs text-slate-500 transition-colors hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+      defaultValue="v4"
+      onChange={onChange}
+    >
+      <option value="v3">v3</option>
+      <option value="v4">v4</option>
+    </select>
+  );
+}