Initialize a Next.js-based documentation site using Fumadocs framework to provide comprehensive guides for all GPUI components. The site includes getting started guides, API references, and documentation for 40+ components including Button, Input, Table, Tree, Chart, and more. --------- Co-authored-by: Jason Lee <huacnlee@gmail.com>
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client";
|
|
import {
|
|
SearchDialog,
|
|
SearchDialogClose,
|
|
SearchDialogContent,
|
|
SearchDialogHeader,
|
|
SearchDialogIcon,
|
|
SearchDialogInput,
|
|
SearchDialogList,
|
|
SearchDialogOverlay,
|
|
type SharedProps,
|
|
} from "fumadocs-ui/components/dialog/search";
|
|
import { useDocsSearch } from "fumadocs-core/search/client";
|
|
import { create } from "@orama/orama";
|
|
import { useI18n } from "fumadocs-ui/contexts/i18n";
|
|
function initOrama() {
|
|
return create({
|
|
schema: { _: "string" },
|
|
// https://docs.orama.com/docs/orama-js/supported-languages
|
|
language: "english",
|
|
});
|
|
}
|
|
export default function DefaultSearchDialog(props: SharedProps) {
|
|
const { locale } = useI18n(); // (optional) for i18n
|
|
const { search, setSearch, query } = useDocsSearch({
|
|
type: "static",
|
|
initOrama,
|
|
locale,
|
|
});
|
|
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} />
|
|
</SearchDialogContent>
|
|
</SearchDialog>
|
|
);
|
|
}
|