Skip to main content

dioxus_docs_kit/components/blog/
search_modal.rs

1use dioxus::prelude::*;
2
3use crate::BlogContext;
4use crate::blog::registry::BlogRegistry;
5use crate::components::search_shell::{SearchHit, SearchModalShell};
6use crate::search::{SNIPPET_WINDOW, build_snippet, split_terms};
7
8/// Blog search modal triggered by Cmd/Ctrl+K or the search button.
9#[component]
10pub fn BlogSearchModal() -> Element {
11    let ctx = use_context::<BlogContext>();
12    let registry = use_context::<&'static BlogRegistry>();
13
14    let search = use_callback(move |query: String| {
15        let terms = split_terms(&query);
16        registry
17            .search_posts(&query)
18            .into_iter()
19            .map(|entry| SearchHit {
20                target: entry.slug.clone(),
21                title: entry.title.clone(),
22                context: None,
23                badge: None,
24                meta: entry.date.clone(),
25                tags: entry.tags.clone(),
26                snippet: build_snippet(&entry.body, &terms, SNIPPET_WINDOW),
27            })
28            .collect()
29    });
30
31    let on_select = use_callback(move |slug: String| (ctx.navigate)(slug));
32
33    rsx! {
34        SearchModalShell {
35            placeholder: "Search posts...",
36            search,
37            on_select,
38        }
39    }
40}