mirror of
https://github.com/Dokploy/website.git
synced 2026-07-20 21:35:25 +02:00
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:
54
apps/docs/components/SearchDialog.tsx
Normal file
54
apps/docs/components/SearchDialog.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user