feat(nx-dev): version picker

nx-dev/ui-common/src/index.ts

@@ -9,6 +9,7 @@ export * from './lib/default-layout';
 export * from './lib/headers/header';
 export * from './lib/flip-card';
 export * from './lib/footer';
+export * from './lib/selector';
 export * from './lib/sidebar-container';
 export * from './lib/sidebar';
 export * from './lib/plugin-card';

nx-dev/ui-common/src/lib/footer.tsx

@@ -2,6 +2,7 @@ import { HeartIcon } from '@heroicons/react/24/solid';
 import { ThemeSwitcher } from '@nx/nx-dev/ui-theme';
 import Link from 'next/link';
 import { DiscordIcon } from './discord-icon';
+import { VersionPicker } from './version-picker';
 
 export function Footer(): JSX.Element {
   const navigation = {
@@ -180,6 +181,9 @@ export function Footer(): JSX.Element {
                 )
               )}
             </div>
+            <div className="flex items-center text-sm">
+              Nx Version <VersionPicker />
+            </div>
             <div className="flex items-center text-sm">
               Theme <ThemeSwitcher />
             </div>

nx-dev/ui-common/src/lib/selector.tsx

@@ -0,0 +1,77 @@
+import { Listbox, Transition } from '@headlessui/react';
+import { ChevronUpDownIcon } from '@heroicons/react/24/solid';
+import { Fragment, JSX } from 'react';
+
+export interface SelectorProps<T> {
+  children: JSX.Element;
+  className?: string;
+  items: { label: string; value: string; data?: T }[];
+  selected: { label: string; value: string };
+  onChange: (item: { label: string; value: string; data?: T }) => void;
+}
+
+export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
+  return (
+    <div className="w-full">
+      <Listbox
+        value={props.selected}
+        onChange={(selection) => props.onChange(selection)}
+      >
+        {({ open }) => (
+          <div className="relative">
+            <Listbox.Button
+              className={
+                'relative w-full cursor-pointer border border-slate-200 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700' +
+                (props.className ? ` ${props.className}` : '')
+              }
+            >
+              <span className="block truncate">
+                <span className="inline-block align-bottom">
+                  {props.children}
+                </span>
+                {props.selected.label}
+              </span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon
+                  className="h-5 w-5 text-slate-500"
+                  aria-hidden="true"
+                />
+              </span>
+            </Listbox.Button>
+            <Transition
+              show={open}
+              as={Fragment}
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+            >
+              <Listbox.Options
+                static
+                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm bg-white py-1 pl-0 text-base shadow-md focus:outline-none sm:text-sm dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
+              >
+                {props.items.map((item, personIdx) => (
+                  <Listbox.Option
+                    key={personIdx}
+                    className={({ active }) =>
+                      `relative cursor-pointer select-none list-none px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-800`
+                    }
+                    value={item}
+                  >
+                    {({ selected, active }) => (
+                      <span className={'block truncate font-medium'}>
+                        {item.label}
+                      </span>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </div>
+        )}
+      </Listbox>
+    </div>
+  );
+}

nx-dev/ui-common/src/lib/version-picker.tsx

@@ -0,0 +1,46 @@
+import { Selector } from './selector';
+import { useRouter } from 'next/navigation';
+
+const versionOptions = [
+  {
+    label: '20',
+    value: '',
+  },
+  {
+    label: '19',
+    value: '19',
+  },
+  {
+    label: '18',
+    value: '18',
+  },
+  {
+    label: '17',
+    value: '17',
+  },
+];
+
+export function VersionPicker(): JSX.Element {
+  const router = useRouter();
+  function versionChange(item: { label: string; value: string }) {
+    if (item.value === '') {
+      return;
+    }
+    router.push(`https://${item.value}.nx.dev`);
+  }
+  return (
+    <>
+      <span className="inline-block align-bottom text-sm font-semibold uppercase leading-[38px] tracking-wide text-slate-800 lg:text-xs lg:leading-[38px] dark:text-slate-200"></span>
+      <div className="ml-2 inline-block">
+        <Selector
+          className="rounded-lg"
+          items={versionOptions}
+          selected={versionOptions[0]}
+          onChange={versionChange}
+        >
+          <div></div>
+        </Selector>
+      </div>
+    </>
+  );
+}