94 lines
2.7 KiB
TypeScript
94 lines
2.7 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 'components/context/MainContext'
|
|
import { useVersion } from 'components/hooks/useVersion'
|
|
|
|
type Props = {
|
|
variant?: 'inline'
|
|
}
|
|
export const HomepageVersionPicker = ({ variant }: Props) => {
|
|
const router = useRouter()
|
|
const { currentVersion } = useVersion()
|
|
const { getDetailsProps } = useDetails({})
|
|
const { allVersions, page, enterpriseServerVersions } = useMainContext()
|
|
|
|
if (page.permalinks && page.permalinks.length <= 1) {
|
|
return null
|
|
}
|
|
|
|
const label = allVersions[currentVersion].versionTitle
|
|
|
|
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>{label}</span>
|
|
<ChevronDownIcon size={24} className="arrow ml-md-1" />
|
|
</div>
|
|
</summary>
|
|
<div>
|
|
{(page.permalinks || []).map((permalink) => {
|
|
return (
|
|
<Link
|
|
key={permalink.href}
|
|
href={permalink.href}
|
|
className={cx(
|
|
'd-block py-2',
|
|
permalink.href === router.asPath
|
|
? 'color-text-link text-underline active'
|
|
: 'Link--primary no-underline'
|
|
)}
|
|
>
|
|
{permalink.pageVersionTitle}
|
|
</Link>
|
|
)
|
|
})}
|
|
<Link
|
|
href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
|
|
className="f6 no-underline color-text-tertiary no-wrap"
|
|
>
|
|
See all Enterprise releases
|
|
</Link>
|
|
</div>
|
|
</Details>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Dropdown
|
|
css={`
|
|
ul {
|
|
width: unset;
|
|
}
|
|
`}
|
|
>
|
|
<summary>
|
|
{label}
|
|
<Dropdown.Caret />
|
|
</summary>
|
|
<Dropdown.Menu direction="sw">
|
|
{(page.permalinks || []).map((permalink) => {
|
|
return (
|
|
<Dropdown.Item key={permalink.href}>
|
|
<Link href={permalink.href}>{permalink.pageVersionTitle}</Link>
|
|
</Dropdown.Item>
|
|
)
|
|
})}
|
|
<div className="pb-1">
|
|
<Link
|
|
href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
|
|
className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap"
|
|
>
|
|
See all Enterprise releases
|
|
</Link>
|
|
</div>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
)
|
|
}
|