import { SearchIcon } from '@chakra-ui/icons'
import {
HStack,
HTMLChakraProps,
Kbd,
Portal,
Text,
VisuallyHidden,
chakra,
} from '@chakra-ui/react'
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
import type {
InternalDocSearchHit,
StoredDocSearchHit,
} from '@docsearch/react/dist/esm/types'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import * as React from 'react'
import SearchStyle from './search.styles'
import { t } from 'utils/i18n'
const ACTION_KEY_DEFAULT = ['Ctrl', 'Control']
const ACTION_KEY_APPLE = ['⌘', 'Command']
interface HitProps {
hit: InternalDocSearchHit | StoredDocSearchHit
children: React.ReactNode
}
function Hit({ hit, children }: HitProps) {
return (
{children}
)
}
export const SearchButton = React.forwardRef(function SearchButton(
props: HTMLChakraProps<'button'>,
ref: React.Ref,
) {
const [actionKey, setActionKey] = React.useState(ACTION_KEY_APPLE)
React.useEffect(() => {
if (typeof navigator === 'undefined') return
const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
if (!isMac) {
setActionKey(ACTION_KEY_DEFAULT)
}
}, [])
return (
{t('component.algolia-search.search-the-docs')}
{t('component.algolia-search.press')}{' '}
{actionKey[0]}
{t('component.algolia-search.and')}
K
{' '}
{t('component.algolia-search.to-search')}
)
})
function AlgoliaSearch() {
const router = useRouter()
const [isOpen, setIsOpen] = React.useState(false)
const searchButtonRef = React.useRef()
const [initialQuery, setInitialQuery] = React.useState(null)
const onOpen = React.useCallback(() => {
setIsOpen(true)
}, [setIsOpen])
const onClose = React.useCallback(() => {
setIsOpen(false)
}, [setIsOpen])
const onInput = React.useCallback(
(e) => {
setIsOpen(true)
setInitialQuery(e.key)
},
[setIsOpen, setInitialQuery],
)
useDocSearchKeyboardEvents({
isOpen,
onOpen,
onClose,
onInput,
searchButtonRef,
})
return (
<>
{isOpen && (
{
return items.map((item) => {
const a = document.createElement('a')
a.href = item.url
const hash = a.hash === '#content-wrapper' ? '' : a.hash
item.url = `${a.pathname}${hash}`
return item
})
}}
/>
)}
)
}
export default AlgoliaSearch