43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import { LinkExternalIcon } from '@primer/octicons-react'
|
|
|
|
import { useMainContext } from 'components/context/MainContext'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
import { Picker } from 'components/ui/Picker'
|
|
|
|
export const ProductPicker = () => {
|
|
const router = useRouter()
|
|
const { activeProducts, currentProduct } = useMainContext()
|
|
const { t } = useTranslation('picker')
|
|
|
|
return (
|
|
<div data-testid="product-picker">
|
|
<Picker
|
|
variant="inline"
|
|
defaultText={t('product_picker_default_text')}
|
|
items={activeProducts.map((product) => ({
|
|
text: product.name,
|
|
selected: product.name === currentProduct?.name,
|
|
href: `${product.external ? '' : `/${router.locale}`}${product.href}`,
|
|
extra: {
|
|
external: product.external,
|
|
},
|
|
}))}
|
|
alignment="end"
|
|
dataTestId="field"
|
|
ariaLabel="Select field type"
|
|
renderItem={(item) => {
|
|
return item.extra?.external ? (
|
|
<>
|
|
{item.text}
|
|
<LinkExternalIcon size="small" className="ml-1" />
|
|
</>
|
|
) : (
|
|
item.text
|
|
)
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|