27aa5d92ea
* cleanup FEATURE_NEXTJS * fixing some server tests * updating article a for server tests * update h2 to h4 map topic tests * data off on TOCs * updating dropdown article versions links * Update so markdown renders in intros * updating typo and all server tests are now passing * remove nextjs feature flag * head.js tests pass * updating article-version-picker * remove nextjs feature flag browser test * update header.js tests * fix page-titles.js test * fix deprecated-enterprise versions * adding early access * testing * getting childTocItem * fixing table of contents to show child toc items * updated to 2 because the sidebar article also has the same link * remove comment * updating pick * Update TocLandingContext.tsx * update package.json and change className to h4 for h2 * updating with mikes feedback * remove a.active test * React clean up: Delete unnecessary layouts/includes Part 2 (#20143) * Delete unnecessary layouts * setting back tests failing :( * update layouts * delete unnecessary includes * remove github-ae-release-notes and updating layouts * remove a.active test
92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import cx from 'classnames'
|
|
import { useRouter } from 'next/router'
|
|
import { Dropdown, Details, useDetails } from '@primer/components'
|
|
import { ChevronDownIcon } from '@primer/octicons-react'
|
|
|
|
import { Link } from 'components/Link'
|
|
import { useMainContext } from './context/MainContext'
|
|
|
|
type Props = {
|
|
variant?: 'inline'
|
|
}
|
|
export const LanguagePicker = ({ variant }: Props) => {
|
|
const router = useRouter()
|
|
const { languages } = useMainContext()
|
|
const { getDetailsProps } = useDetails({})
|
|
const locale = router.locale || 'en'
|
|
const langs = Object.values(languages)
|
|
const selectedLang = languages[locale]
|
|
|
|
if (variant === 'inline') {
|
|
return (
|
|
<Details {...getDetailsProps()} className="details-reset">
|
|
<summary aria-label="Toggle language list">
|
|
<div className="d-flex flex-items-center flex-justify-between py-2">
|
|
<span>{selectedLang.nativeName || selectedLang.name}</span>
|
|
<ChevronDownIcon size={24} className="arrow ml-md-1" />
|
|
</div>
|
|
</summary>
|
|
<div>
|
|
{langs.map((lang) => {
|
|
return (
|
|
<Link
|
|
key={lang.code}
|
|
href={router.asPath}
|
|
locale={lang.code}
|
|
disableClientTransition={true}
|
|
className={cx(
|
|
'd-block py-2',
|
|
lang.code === router.locale
|
|
? 'color-text-link text-underline active'
|
|
: 'Link--primary no-underline'
|
|
)}
|
|
>
|
|
{lang.nativeName ? (
|
|
<>
|
|
{lang.nativeName} ({lang.name})
|
|
</>
|
|
) : (
|
|
lang.name
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</Details>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Dropdown
|
|
css={`
|
|
ul {
|
|
width: unset;
|
|
}
|
|
`}
|
|
data-testid="language-picker"
|
|
>
|
|
<summary>
|
|
{selectedLang.nativeName || selectedLang.name}
|
|
<Dropdown.Caret />
|
|
</summary>
|
|
<Dropdown.Menu direction="sw">
|
|
{langs.map((lang) => {
|
|
return (
|
|
<Dropdown.Item key={lang.code}>
|
|
<Link href={router.asPath} locale={lang.code} disableClientTransition={true}>
|
|
{lang.nativeName ? (
|
|
<>
|
|
{lang.nativeName} ({lang.name})
|
|
</>
|
|
) : (
|
|
lang.name
|
|
)}
|
|
</Link>
|
|
</Dropdown.Item>
|
|
)
|
|
})}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
)
|
|
}
|