567652b0e3
* Create migrate-colors-primer-18.js * Update colors round 1 * upgrade primer packages * Update index.scss * Replace auto colors * remove btn-primary-matte * Turns out the class names and variables names DONT LINE UP... ugh.... * Check for allowed var colors
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
|
|
import { Link } from 'components/Link'
|
|
import { useMainContext } from 'components/context/MainContext'
|
|
import { ChevronDownIcon, LinkExternalIcon } from '@primer/octicons-react'
|
|
import { Box, Dropdown, Details, useDetails } from '@primer/components'
|
|
|
|
// Product Picker - GitHub.com, Enterprise Server, etc
|
|
export const ProductPicker = () => {
|
|
const router = useRouter()
|
|
const { activeProducts, currentProduct } = useMainContext()
|
|
const { getDetailsProps, setOpen } = useDetails({ closeOnOutsideClick: true })
|
|
|
|
return (
|
|
<Details {...getDetailsProps()} className="details-reset">
|
|
<summary
|
|
className="d-block color-fg-default btn btn-invisible"
|
|
role="button"
|
|
aria-label="Toggle products list"
|
|
>
|
|
<div
|
|
data-testid="current-product"
|
|
data-current-product-path={currentProduct?.href}
|
|
className="d-flex flex-items-center flex-justify-between"
|
|
>
|
|
<span>{currentProduct?.name || 'All Products'}</span>
|
|
<ChevronDownIcon size={24} className="arrow ml-md-1" />
|
|
</div>
|
|
</summary>
|
|
<Box data-testid="product-picker-list" py="2" style={{ zIndex: 6 }}>
|
|
{activeProducts.map((product) => {
|
|
return (
|
|
<Dropdown.Item key={product.id} onClick={() => setOpen(false)}>
|
|
<Link href={`${product.external ? '' : `/${router.locale}`}${product.href}`}>
|
|
{product.name}
|
|
{product.external && (
|
|
<span className="ml-1">
|
|
<LinkExternalIcon size="small" />
|
|
</span>
|
|
)}
|
|
</Link>
|
|
</Dropdown.Item>
|
|
)
|
|
})}
|
|
</Box>
|
|
</Details>
|
|
)
|
|
}
|