docs: integrate search functionality with new SearchDialog component

- Added a new SearchDialog component to enhance user experience for searching documentation.
- Updated the layout to include the SearchDialog within the RootProvider for improved accessibility.
- Enhanced the search API to support tag filtering based on the first slug, allowing for more refined search results.
This commit is contained in:
Mauricio Siu
2025-12-07 18:11:04 -06:00
parent 4f685a2df9
commit b605ad10e3
3 changed files with 76 additions and 1 deletions

View File

@@ -0,0 +1,54 @@
'use client';
import {
SearchDialog,
SearchDialogClose,
SearchDialogContent,
SearchDialogFooter,
SearchDialogHeader,
SearchDialogIcon,
SearchDialogInput,
SearchDialogList,
SearchDialogOverlay,
TagsList,
TagsListItem,
type SharedProps,
} from 'fumadocs-ui/components/dialog/search';
import { useDocsSearch } from 'fumadocs-core/search/client';
import { useState } from 'react';
export default function CustomSearchDialog(props: SharedProps) {
const [tag, setTag] = useState<string | undefined>('all');
// When tag is "all", don't filter by tag (pass undefined)
const { search, setSearch, query } = useDocsSearch({
type: 'fetch',
tag: tag === 'all' ? undefined : tag,
});
return (
<SearchDialog
search={search}
onSearchChange={setSearch}
isLoading={query.isLoading}
{...props}
>
<SearchDialogOverlay />
<SearchDialogContent>
<SearchDialogHeader>
<SearchDialogIcon />
<SearchDialogInput />
<SearchDialogClose />
</SearchDialogHeader>
<SearchDialogList items={query.data !== 'empty' ? query.data : null} />
<SearchDialogFooter>
<TagsList tag={tag} onTagChange={setTag}>
<TagsListItem value="all">All</TagsListItem>
<TagsListItem value="core">Core</TagsListItem>
<TagsListItem value="cli">CLI</TagsListItem>
<TagsListItem value="api">API</TagsListItem>
</TagsList>
</SearchDialogFooter>
</SearchDialogContent>
</SearchDialog>
);
}