miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

chore(nx-dev): move version picker to header (#29823)

Browse Source 
Move the version picker to the header next to the docs logo
This commit is contained in:
Isaac Mann 2025-02-03 10:39:43 -05:00 committed by GitHub
parent a5f13a28b1
commit ff57bd9444
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nx-dev/ui-common/src/lib/footer.tsx
View File

@ -201,9 +201,6 @@ export function Footer({
)
)}
</div>
<div className="flex items-center text-sm">
Nx Version <VersionPicker />
</div>
<div className="flex items-center text-sm">
Theme <ThemeSwitcher />
</div>

6
nx-dev/ui-common/src/lib/headers/documentation-header.tsx
View File

@ -20,6 +20,7 @@ import {
import { resourceMenuItems } from './menu-items';
import { SectionsMenu } from './sections-menu';
import { DiscordIcon } from '../discord-icon';
import { VersionPicker } from '../version-picker';
function Menu({ tabs }: { tabs: any[] }): ReactElement {
return (
@ -186,7 +187,7 @@ export function DocumentationHeader({
return (
<div className="border-b border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60 print:hidden">
<div className="mx-auto flex w-full items-center gap-6 lg:px-8 lg:py-4">
<div className="mx-auto flex w-full items-center gap-4 lg:px-8 lg:py-4">
{/*MOBILE MENU*/}
<div className="flex w-full items-center lg:hidden">
<button
@ -211,7 +212,7 @@ export function DocumentationHeader({
</div>
</div>
{/*LOGO*/}
<div className="flex items-center">
<div className="flex items-center gap-4">
<Link
href="/"
className="flex flex-grow items-center px-4 text-slate-900 lg:px-0 dark:text-white"
@ -229,6 +230,7 @@ export function DocumentationHeader({
Docs
</span>
</Link>
<VersionPicker />
</div>
{/*SEARCH*/}
<div className="hidden w-full max-w-[14rem] lg:inline">

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

@ -12,19 +12,19 @@ import { Fragment, JSX, useState } from 'react';
const versionOptions = [
{
label: '20',
label: 'v20',
value: '',
},
{
label: '19',
label: 'v19',
value: '19',
},
{
label: '18',
label: 'v18',
value: '18',
},
{
label: '17',
label: 'v17',
value: '17',
},
];
@ -33,19 +33,18 @@ export function VersionPicker(): JSX.Element {
const [selected, _] = useState(versionOptions[0]);
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">
<div className="inline-block">
<div className="w-full">
<Listbox value={selected}>
{({ open }) => (
<div className="relative">
<ListboxButton
className={
'relative w-full cursor-pointer rounded-lg 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'
'relative w-full cursor-pointer rounded-lg border-slate-200 py-2 pr-6 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'
}
>
<span className="block truncate">{selected.label}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center">
<ChevronUpDownIcon
className="h-5 w-5 text-slate-500"
aria-hidden="true"