d76c16da19
* update article content to markdown ui component * decouple lunr indexing from class name * remove summary outline none rule, apply utility class instead * improve typing * scope more styles down to markdown-body/extended-markdown * move all markdown-body style overrides to MarkdownContent component * fix class targeting within css module * clean up MarkdownContent header style * rename data-lunr to data-search * fix: inline code color issue * fix: update article markdown to work with MarkdownContent
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import cx from 'classnames'
|
|
|
|
import { Link } from 'components/Link'
|
|
import { useMainContext } from 'components/context/MainContext'
|
|
import { ChevronDownIcon, LinkExternalIcon } 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 outline-none"
|
|
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>
|
|
)
|
|
}
|