56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { SelectMenu, Button, Dropdown } from '@primer/react'
|
|
import { Link } from 'components/Link'
|
|
import { useRouter } from 'next/router'
|
|
import { usePlaygroundContext } from 'components/context/PlaygroundContext'
|
|
|
|
type Props = {
|
|
variant?: 'tabs' | 'dropdown'
|
|
}
|
|
export const CodeLanguagePicker = ({ variant }: Props) => {
|
|
const router = useRouter()
|
|
const { codeLanguages, currentLanguage } = usePlaygroundContext()
|
|
const routePath = router.asPath.split('?')[0]
|
|
|
|
if (variant === 'tabs') {
|
|
return (
|
|
<nav aria-label="Programming Language">
|
|
{codeLanguages.map((language) => {
|
|
return (
|
|
<Link
|
|
key={language.id}
|
|
className="subnav-item"
|
|
href={`${routePath}?langId=${language.id}`}
|
|
aria-current={language.id === currentLanguage.id ? 'page' : undefined}
|
|
>
|
|
{language.label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<SelectMenu className="position-relative">
|
|
<Button as="summary">
|
|
{currentLanguage.label} <Dropdown.Caret />
|
|
</Button>
|
|
<SelectMenu.Modal style={{ minWidth: 300 }} align="right">
|
|
<SelectMenu.Header>Programming Language</SelectMenu.Header>
|
|
<SelectMenu.List>
|
|
{codeLanguages.map((language) => (
|
|
<SelectMenu.Item
|
|
key={language.id}
|
|
as="a"
|
|
href={`${routePath}?langId=${language.id}`}
|
|
selected={language.id === currentLanguage.id}
|
|
>
|
|
{language.label}
|
|
</SelectMenu.Item>
|
|
))}
|
|
</SelectMenu.List>
|
|
</SelectMenu.Modal>
|
|
</SelectMenu>
|
|
)
|
|
}
|