51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import { LinkExternalIcon } from '@primer/octicons-react'
|
|
import cx from 'classnames'
|
|
|
|
import { Link } from 'components/Link'
|
|
import { useMainContext } from 'components/context/MainContext'
|
|
import { ChevronDownIcon } from '@primer/octicons-react'
|
|
import { Details, useDetails } from '@primer/components'
|
|
|
|
export const ProductPicker = () => {
|
|
const router = useRouter()
|
|
const { activeProducts, currentProduct } = useMainContext()
|
|
const { getDetailsProps } = useDetails({})
|
|
|
|
return (
|
|
<Details {...getDetailsProps()} className="details-reset">
|
|
<summary className="color-text-link" role="button" aria-label="Toggle products list">
|
|
<div id="current-product" className="d-flex flex-items-center flex-justify-between py-2">
|
|
{/* <!-- Product switcher - GitHub.com, Enterprise Server, etc -->
|
|
<!-- 404 and 500 error layouts are not real pages so we need to hardcode the name for those --> */}
|
|
<span>{currentProduct?.name || 'All Products'}</span>
|
|
<ChevronDownIcon size={24} className="arrow ml-md-1" />
|
|
</div>
|
|
</summary>
|
|
<div id="homepages" style={{ zIndex: 6 }}>
|
|
{activeProducts.map((product) => {
|
|
return (
|
|
<Link
|
|
key={product.id}
|
|
href={`${product.external ? '' : `/${router.locale}`}${product.href}`}
|
|
className={cx(
|
|
'd-block py-2',
|
|
product.id === currentProduct?.id
|
|
? 'color-text-link text-underline active'
|
|
: 'Link--primary no-underline'
|
|
)}
|
|
>
|
|
{product.name}
|
|
{product.external && (
|
|
<span className="ml-1">
|
|
<LinkExternalIcon size="small" />
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</Details>
|
|
)
|
|
}
|