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>
<div className="flex items-center text-sm">
Nx Version <VersionPicker />
</div>
<div className="flex items-center text-sm"> <div className="flex items-center text-sm">
Theme <ThemeSwitcher /> Theme <ThemeSwitcher />
</div> </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 { resourceMenuItems } from './menu-items';
import { SectionsMenu } from './sections-menu'; import { SectionsMenu } from './sections-menu';
import { DiscordIcon } from '../discord-icon'; import { DiscordIcon } from '../discord-icon';
import { VersionPicker } from '../version-picker';
function Menu({ tabs }: { tabs: any[] }): ReactElement { function Menu({ tabs }: { tabs: any[] }): ReactElement {
return ( return (
@ -186,7 +187,7 @@ export function DocumentationHeader({
return ( return (
<div className="border-b border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60 print:hidden"> <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*/} {/*MOBILE MENU*/}
<div className="flex w-full items-center lg:hidden"> <div className="flex w-full items-center lg:hidden">
<button <button
@ -211,7 +212,7 @@ export function DocumentationHeader({
</div> </div>
</div> </div>
{/*LOGO*/} {/*LOGO*/}
<div className="flex items-center"> <div className="flex items-center gap-4">
<Link <Link
href="/" href="/"
className="flex flex-grow items-center px-4 text-slate-900 lg:px-0 dark:text-white" 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 Docs
</span> </span>
</Link> </Link>
<VersionPicker />
</div> </div>
{/*SEARCH*/} {/*SEARCH*/}
<div className="hidden w-full max-w-[14rem] lg:inline"> <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 = [ const versionOptions = [
{ {
label: '20', label: 'v20',
value: '', value: '',
}, },
{ {
label: '19', label: 'v19',
value: '19', value: '19',
}, },
{ {
label: '18', label: 'v18',
value: '18', value: '18',
}, },
{ {
label: '17', label: 'v17',
value: '17', value: '17',
}, },
]; ];
@ -33,19 +33,18 @@ export function VersionPicker(): JSX.Element {
const [selected, _] = useState(versionOptions[0]); const [selected, _] = useState(versionOptions[0]);
return ( 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="inline-block">
<div className="ml-2 inline-block">
<div className="w-full"> <div className="w-full">
<Listbox value={selected}> <Listbox value={selected}>
{({ open }) => ( {({ open }) => (
<div className="relative"> <div className="relative">
<ListboxButton <ListboxButton
className={ 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="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 <ChevronUpDownIcon
className="h-5 w-5 text-slate-500" className="h-5 w-5 text-slate-500"
aria-hidden="true" aria-hidden="true"